慢速jQuery动画-更改宽度

Slow jQuery animation - Changing width

本文关键字：jQuery 动画 慢速      更新时间：2023-09-26

我有两个div。一个当前为0%，另一个为100%。使用点击功能，我将它们转换为12%和88%。

作品很有魅力，但我希望"过程"是缓慢的，而不是瞬间的。就像一个小动画。

这是我的代码：

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

使用CSS转换。将以下属性添加到.right和.left类中。

CSS

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

要使用jquery实现这一点，可以使用以下snip：

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

JSFiddle

相关文章：