スティッキー フッターのアニメーションを作成しようとしましたが、実際には 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 回呼び出すだけです。ここでの間違いは何ですか?