更短的div寬度動畫jQuery代碼

我想寫一個jQuery代碼動畫div寬度更改懸停，我不想使用CSS，因爲我想能夠支持舊版瀏覽器。我寫了這個jQuery代碼爲擴大和鼠標懸停shriking股利/鼠標移開：更短的div寬度動畫jQuery代碼

$('.menu').hover(function(){ 
    $('.menu').animate({ width: "350px" }, 400); 
}); 
$('.menu').mouseout(function(){ 
    $('.menu').animate({ width: "50px" }, 400); 
});

這是DIV + CSS：

.menu { height: 500px; width: 50px; }

我不知道，但jQuery代碼感覺有點爲了這樣一個簡單的行動，有沒有辦法讓它變得更短？

在此先感謝，Eyal。

來源

2013-11-23 Eyal Binehaker

怎麼樣

$('.menu').hover(function (e) { 
    $(this).stop(true, true).animate({ 
     width: e.type == 'mouseenter' ? 
      "350px" : '50px' 
    }, 400); 
});

演示：Fiddle

來源

2013-11-23 11:56:55

是啊，這工作得很好。我必須承認，我對jquery有非常基本的知識，所以我不知道如何以高級方式使用函數... 感謝您的幫助:-) –

您可以編寫類似下面

$('.menu').hover(function(){ 
    $(this).animate({ width: "350px" }, 400); 
},function(){ 
    $(this).animate({ width: "50px" }, 400); 
});

來源

2013-11-23 11:58:40

更短的div寬度動畫jQuery代碼

回答

相關問題