jquery - 如果 div 可见，则无法在点击时交换图像

Question

如果 #filters 可见，我尝试交换图像，但它不起作用，控制台中没有错误...

$(document).ready(function(){
  $("#filter-options :checkbox").click(function(){
    $("#product-list li").hide();
    $("#filter-options :checkbox:checked").each(function(){
      $("." + $(this).val()).fadeIn();
    });

    if($('#filter-options :checkbox').filter(':checked').length < 1){
      $("#product-list li").fadeIn();
    }
  });

  $('.col').on('click', function(){

    $('#filters').slideToggle(200);

    if($('#filters').is(':visible')){
      $('.col').attr('src','http://www.asus.com/media/images/close_round.png');
    }

    else{
      $('.col').attr('src','http://www.asus.com/media/images/open_round.png');
    }

  })
});

http://jsfiddle.net/594yj9uL/9/

Answer 1

这是因为slideToggle() ，对于 slideToggle()，您需要使用完整回调选项检查动画的可见性和结束

$('.col').on('click', function () {

    $('#filters').slideToggle(200, function(){
        console.log($(this).is(':visible'))
        if ($(this).is(':visible')) {
            $('.col').attr('src', 'http://www.asus.com/media/images/close_round.png');
        } else {
            $('.col').attr('src', 'http://www.asus.com/media/images/open_round.png');
        }
    });
})

演示:Fiddle