0

我尝试为粘性页脚制作动画，实际上，它是一个使用 jquery 和 setTimeout 的水平功能区。我只想为该功能区的背景颜色设置动画。

的HTML

<div class="ribbon">
    <div class="closeR" style="display:inline-block; width:2.9em; height:1.8em; float:right; margin-right:0.7em; cursor: pointer;" title="إغلاق">X</div>    <a href="/viewAyah/192">كل عام وأنتم بخير... رمضان الطاعات</a>
</div>

CSS

.ribbon {
    z-index: 10;
    border: 1px solid #faa;
    background-color: #a00;
    overflow: hidden;
    width:100%;
    /*bottom bar*/
    position:fixed;
    bottom: 0;
    left:0;
    right:0;
    /* shadow */
    -moz-box-shadow: -1px -2px 6px #525252;
    -webkit-box-shadow: -1px -2px 6px #525252;
}
.ribbon a {
    color: #fff;
    display: inline-block;
    font: bold 81.25%'sans-serif;
 margin: 0.05em 0 0.075em 0;
    padding: 0.5em 3.5em;
    text-align: center;
    text-decoration: none;
    /* shadow */
    text-shadow: 0 0 0.5em #444;
}

最后是Javascript：

$(document).ready(function () {
    if ($.cookie('ribbonClose')) {
        $('.ribbon').css("display", "none");

    } else {
        state = true;
        setTimeout(function () {
            if (state) {
                $(".ribbon").animate({
                    backgroundColor: "#ff0"
                }, 100);
                state = false;
            } else {
                $(".ribbon").animate({
                    backgroundColor: "#050"
                }, 100);
                state = true;
            }
        }, 50);

    }

    $('.closeR').click(function () {
        $('.ribbon').fadeOut("slow");
        $.cookie('ribbonClose', true, {
            expires: 1,
            path: '/'
        });
    })
})

动画不行！似乎 setTimeout 不能每 50 毫秒调用一次定义的函数，它只是调用一次函数！这里有什么错误？

JSFiddle 上有一个现场演示

4

0 回答 0