Question

我有一个功能来显示和隐藏页面上的实用工具栏。我想给它制作动画。这不是动画。类“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;
}

要包含自定义缓和功能，请查看this site。

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

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

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

Answer 2

以下作品 if 条形图已经从延迟函数动画化了。但是，如果我先点击它，它就不会动画，只需切换类。

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");
    }
});

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

2 个答案: