1

我有一个在页面上显示和隐藏实用工具栏的功能。我想为它制作动画。它不是动画。“标志”类为空。"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;
}
4

2 回答 2

2

看起来您正在混合 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 的animate()函数

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

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

于 2013-04-24T22:44:43.510 回答
0

如果条形图已经从延迟函数中生成动画，则以下工作。但是，如果我先单击，它不会动画，只需切换类即可。

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");
    }
});
于 2013-05-05T05:17:04.033 回答