jQuery的动画缺陷

演示http://www.bootply.com/gyEJYEzFei jQuery的动画缺陷

显然，动画（）非异步使他们不能在同一时间触发的，但我不知道为什么当鼠标离开是有重叠的问题，在底排。我尝试过渡与CSS，现在与动画（）仍然无法完善动画。代码

$('.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' 
     }); 
    } 
});

来源

2014-10-02 user3522892

'transition'属性不可动画。将它设置在你的CSS中，或者在链中的某处使用'.css（{transition：“all 0.2s linear”}）“。 – 2014-10-02 09:30:38

的

部分我不知道你为什么会想混合jQuery和CSS过渡。我会选择一个或另一个。如果你的结构是这样的：

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

http://jsfiddle.net/mk1etnc8/1/

如果你想使用jQuery的动画，你可以做这样的事情;

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

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

希望这有助于！

来源

2014-10-02 08:46:57 fhollste

jQuery的动画缺陷

回答

相关问题