Question

显然animate（）非异步导致它们无法同时触发，但我不知道为什么当mouseleave在底行有重叠问题时。我尝试使用转换css，现在使用animate（）仍然无法完善动画。

代码的一部分

$('.hoverExpand').mouseenter(function () {
    var $this = $(this);

  var getIndexOfTarget = $this.closest('.product-panel').index();

  if(getIndexOfTarget % 2 == 0){ //check target if is even 
    $('.product-panel').filter(function(i) {
      return i > 2 && i % 2 == 1
    }).animate({'margin-top':"-=100px",
            "transition":"all 0.2s linear"
          });
  }else{
    $('.product-panel').filter(function(i) {
      return i > 1 && i % 2 == 0;
    }).animate({'margin-top':"-=100px",
            "transition":"all 0.2s linear"
          });
  }


    if (!$this.hasClass('on')) {
        $this.addClass('on');
        $this.find('.productsThumbWrap').stop(true, true).animate({
            "margin-top": "200px"
        }, "fast",function(){



        });
        $this.find('.productsThumbWrap img').stop(true, true).css({
            opacity: 1,
                'transition': 'opacity 0.45s ease 0.15s'
        });
    }
});

Answer 1

我不确定你为什么要混合使用jquery和css转换。我会挑选一个或另一个。如果您的结构类似于：

这是一个只有CSS（和简化的HTML结构）的简单示例：

<强> http://jsfiddle.net/mk1etnc8/1/

如果你想使用jquery动画，你可以这样做;

$('.product').hover(
    function(){ $(this).child('.product-lower').slideDown();},
    function(){ $(this).child('.product-lower').slideUp();});

我根本没有测试过这段代码，但也许你明白了。

希望这有帮助！

jquery动画在多个元素中的不完美

1 个答案: