緩慢的jQuery動畫 - 改變寬度

我有兩個div。一個目前是0％，另一個是100％。通過點擊功能，我將它們轉換爲12％和88％。緩慢的jQuery動畫 - 改變寬度

工程像魅力，但我希望「過程」緩慢，而不是瞬間。就像一個小動畫。

這是我的代碼：

<script> 
$(document).ready(function(){ 
    $(".menu_logo").click(function(){ 
    $(".right").css("width","88%"); 
    $(".left").css("width","12%"); 
    $(".menu_logo").css("display","none"); 
    }); 
}); 
</script>

來源

2014-11-06 Mark

使用CSS過渡。將以下屬性添加到您的.right和.left類。

CSS

-webkit-transition: width 150ms linear; 
o-transition: width 150ms linear; 
transition: width 150ms linear;

來源

2014-11-06 22:09:56 elzi

太好了！像魅力一樣工作！我以爲我必須觸摸CSS ...非常感謝！問候。 – Mark 2014-11-06 22:11:10

很高興聽到它。如果您沒有任何問題，請考慮將其標記爲已解決。 – elzi 2014-11-06 22:13:02

要使用jQuery做到這一點，你可以使用下面的剪斷：

$("button").click(function() {$("div").animate({width:'350px'}, "slow")});

JSFiddle

來源

2014-11-06 22:15:46

緩慢的jQuery動畫 - 改變寬度

回答

相關問題