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的動畫缺陷

回答

相關問題