我有这个脚本:
<div style="position:relative ;overflow:hidden ; height:195px;">
<div style="position:absolute" class="scroll">
{foreach from=$announce_list item=a}
<div>
<img src="imgsize.php?w=214&h=100&img=../uploads/announce/{$a.--------}.jpg" />
<h4 dir="rtl" style="padding-top:10px; padding-bottom:5px;">{$a.------}</h4>
<p dir="rtl" style="text-align:justify ;line-height:17px;">{$a.---------|truncate:"300":"..." }</p>
</div>
{/foreach}
</div>
</div>
{literal}
<script>
$(function(){
function change_announce()
{
console.log('asdasdasd');
var Scroll = $('.scroll') ;
Scroll.children('div:first').animate({marginTop:'-195px' } , 1000 ,
function(){
Scroll.children('div:first').appendTo(Scroll).css('marginTop' , '0px' ).fadeIn(2000);
}
);
}
setInterval(change_announce , 3000) ;
});
</script>
{/literal}
在此演示文稿的www.mahestan.ac.ir网站的右侧窗格中,在第二个div隐藏后,动画未完全执行,下一个div无法完成动画广告突然跳转!
答案 0 :(得分:1)
更新:在进一步检查代码时,我发现了小跳的原因。在动画中,您将DIV滚动到位置-195px
,这是.scroll
div的高度。
但是,您需要考虑padding-top:10px
和padding-bottom:5px
。因此,您需要将-15px
添加到总数为-210px
而不是-195px
的数字中。
更改此行:
Scroll.children('div:first').animate({marginTop:'-195px' } , 1000 ,
要:
Scroll.children('div:first').animate({marginTop:'-210px' } , 1000,