Jquery 不使用toggleClass()或addClass()的情况
我有一个在页面上显示和隐藏工具条的功能。我想给它制作动画。这不是动画。类“标志”为空。“min”类只需更改背景图像以及工具条的高度和绝对位置 我做错了什么Jquery 不使用toggleClass()或addClass()的情况,jquery,easing,Jquery,Easing,我有一个在页面上显示和隐藏工具条的功能。我想给它制作动画。这不是动画。类“标志”为空。“min”类只需更改背景图像以及工具条的高度和绝对位置 我做错了什么 $(document).ready(function() { var ubar = $("#ccUtilityBarWrapper,#ccUtilityBarWrapperInner,#clickBar"); ubar.delay(10000).queue(function(nxt) { if ($(this)
$(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;
}
看起来您正在混合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;
}
要包含自定义缓解功能,请查看
或者,如果您需要支持较旧的浏览器,请使用jQuery的函数
编辑:实际上,jQueryUI将设置类名的动画,但是您需要使用。如果栏已经通过延迟函数设置了动画,那么下面的操作就可以了。但是,如果我先单击,它将不会设置动画,只需切换类即可
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");
}
});
CSS3转换对IE8不起作用,我仍然需要支持IE8。根据这一点:addClass()和toggleClass()具有相同的属性。也许这是为了使用比我们现在使用的jQuery(1.4.2)更高的版本。我将尝试switchClass()。解决它。队列阻止动画在单击时运行。
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");
}
});