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 ミリ秒ごとに呼び出すことができないようです。関数を 1 回呼び出すだけです。ここでの間違いは何ですか？

JSFiddleにライブデモがあります

4

0 に答える 0