Question

下面我有一段代码，用于使用下拉菜单过滤产品。 #child_cat分区的内容根据锚标记的value属性而变化：

$('#brandsort').change(function(){
    $('#child_cat a').fadeOut(500);
    $('[value="' + $(this).val() + '"]').fadeIn();
    if ($('#brandsort option:selected').text() === "") {
        $('#child_cat a').fadeIn(500);
    }
});

代码会过滤掉与其选项值不匹配的产品，但不会播放动画。现在，它更像是一个延迟的.show（）/ .hide（）函数。请告诉我我的代码中的任何不当行为，或者我可能做错的事情。

修改

我知道SO上的人通常会喜欢你们中的一些人的实际帮助，但在这种情况下，我特别只是要求“启蒙”。只是对我本来可能做错的一些口头意见。

要完成提供某些HTML的请求，您可以在此处找到它：http://jsfiddle.net/HJPN8/3/

Answer 1

逻辑中存在一些错误，使其无效。首先，你无法看到淡入淡出动画的原因是因为淡入淡出使用了css属性的不透明度。不透明度仅适用于block和inline-block元素，并且您在.fadeOut()标记上使用display:inline。因此可以通过以下方式轻松修复：

#child_cat a{
  display:block;
}

接下来，您使用.fadeOut()和.fadeIn()同时运行，这意味着动画会发生碰撞而无法正常工作。因此，您需要使用回调函数来正确计时。下面是我重构的代码，我已经包含了很多评论，所以你可以看到它是如何工作的。淡入淡出函数已替换为.animate()，这是一个低端函数，可以在这种情况下为您提供更多控制。

最后一件事是您在产品上使用了value属性，因为此属性特定于options标记，因此不推荐使用此属性。如果您希望创建自定义属性，那么标准方法是将它们添加到＆＃34;数据 - ＆＃34;你可以看到我在这里完成了：http://jsfiddle.net/HJPN8/6/

$(function(){
  var brandsort = $('#brandsort');
  var products = $('#child_cat a');

  brandsort.on('change', function(e){
    var val = brandsort.val();
    // If search is blank then select all products to show else filter specific products.
    var filteredProducts = (val == '') ? products : products.filter('[data-value="' + val + '"]');

    // Hide products and set callback for when the animation has finished.
    // If we don't use a callback, the products will animate out and in at the same time, ruining the effect.
    products.animate({opacity: 0}, 300).promise().done(function(){
      // Now that he products' opacity is 0, we set them to display block to remove them from the flow of the DOM.
      products.css({display: 'none'});

      // Now Bring the filtered products back and animate them in again.
      filteredProducts.css({display: 'block'}).animate({opacity: 1}, 500);
    });
  });
});

fadeIn（）/ fadeOut（）动画没有播放

1 个答案: