轻松不使用toggleClass（）或addClass（）

我有一个function来显示和隐藏页面上的实用工具栏。 我想给它制作动画。 这不是动画。 类“flag”为空。 “min”类只是更改背景图像以及实用工具栏的高度和绝对位置。

我究竟做错了什么？

$(document).ready(function() { var ubar = $("#ccUtilityBarWrapper,#ccUtilityBarWrapperInner,#clickBar"); ubar.delay(10000).queue(function(nxt) { if ($(this).hasClass("flag")) { } else { $(this).addClass("min",1500,"easeInOutQuad"); nxt(); } }); $("#clickBar").click(function(e){ ubar.addClass("flag"); ubar.toggleClass("min",1500,"easeInOutQuad"); }); }); #ccUtilityBarWrapper { position: fixed; z-index: 3; bottom: 0; left: 0; width: 100%; height: 48px; background: #1775b5; -webkit-box-shadow:0px 0px 3px rgba(0, 0, 0, 0.75); -moz-box-shadow:0px 0px 3px rgba(0, 0, 0, 0.75); box-shadow:0px 0px 3px rgba(0, 0, 0, 0.75); } #ccUtilityBarWrapper.min { bottom: -48px; } /* used to place utility nav in absolute position */ #ccUtilityBarWrapperInner { background: none; position: fixed; z-index: 4; bottom: 0; width: 100%; height: 81px; } #ccUtilityBarWrapperInner.min { background: none; height: 40px; } #clickBar { background: url("http://teamsite-prod.rccl.com:8030/animated_bar/minimize.png") no-repeat scroll center top transparent; height: 34px; } #clickBar.min { background: url("http://teamsite-prod.rccl.com:8030/animated_bar/expand.png") no-repeat scroll center top transparent; height: 40px; } 

Answer 1

看起来你正在混合css3过渡和jQuery动画。

你不能为类名设置动画，这不会起作用：

 $(this).addClass("min",1500,"easeInOutQuad"); 

相反，在你的css3中，添加一个过渡：

 #ccUtilityBarWrapperInner.min { background: none; height: 40px; -webkit-transition: height 1.5s ease-in-out; -moz-transition: height 1.5s ease-in-out; -o-transition: height 1.5s ease-in-out; transition: height 1.5s ease-in-out; } 

要包含自定义缓动function，请查看此站点 。

或者，如果您需要支持旧浏览器，请使用jQuery的animate（）函数

 $(this).animate({ height: '40px'}, 1500, "easeInOutQuad"); 

---

编辑：实际上，jQuery UI将为类名设置动画，但您需要使用switchClass()函数 。

Answer 2

如果条形图已经从延迟函数设置了动画， 则以下工作。 但是，如果我先点击它，它将不会动画，只需切换类。

 var ubar = $("#ccUtilityBarWrapper,#ccUtilityBarWrapperInner,#clickBar"); ubar.delay(10000).queue(function(nxt) { if ($(this).hasClass("flag")) { } else { ubar.animate({bottom: '-48px'}, 300); ubar.addClass("min"); nxt(); } }); ubar.click(function(){ ubar.addClass("flag"); }); $("#clickBar").click(function(){ if (ubar.hasClass("min")) { ubar.animate({bottom: '0'}, 300); ubar.removeClass("min"); } else { ubar.animate({bottom: '-48px'}, 300); ubar.addClass("min"); } });