Question

我有两个div。一个目前是0％，另一个是100％。使用click功能，我将它们转换为12％和88％。

像魅力一样工作，但我希望“过程”变慢，而不是瞬间。就像一个小动画。

这是我的代码：

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

Answer 1

使用CSS过渡。将以下属性添加到.right和.left类。

<强> CSS

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

Answer 2

要使用jquery执行此操作，您可以使用以下片段：

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

JSFiddle

慢jQuery动画 - 改变宽度

2 个答案: