凌亂的jQuery的div div附加

-1

我有問題的div div附加頁面的第一次加載。凌亂的jQuery的div div附加

預期的效果：從本質上講，只要具有當前格淡出，暫停，然後下一個淡入

結果：新追加的div跳轉到DIV的頂部被附加到，迫使先前下跌，看起來難看。幾乎就像在上一個完成淡出之前div已經淡入，儘管.delay()函數。

原jQuery代碼：

$(document).ready(function(){ 
$("#blurb > div:gt(0)").hide(); 
setInterval(function() { 
$('#blurb > div:first') 
.fadeOut(1000) 
.delay(1000) 
.next(1) 
.fadeIn(1000) 
.end(1) 
.appendTo('#blurb'); 
}, 5000); 
});

相關CSS：

#blurb{ 
float:right; 
text-align:right; 
width:300px; 
font-size:16px; 
margin-right:-20px; 
height:100px; 
z-index:-100; 
} 
#blurb > div{ 
position:relative; 
z-index:-100; 
height:100px; 
}

相關HTML：

<div id="blurb"> 
<div> 
<b style="font-size:18px;color:#EF116A;">Having problems?</b><br> 
Please call our Sheffield-based support team on <b>0114 303 3232</b>. 
</div> 
<div> 
<b style="font-size:18px;color:#EF116A;">Having problems?</b><br> 
Please email our Sheffield-based support team at <b>[email protected]</b>. 
</div> 
<script> 
jQuery script as above 
</script> 
</div>

（請忽略非校驗等，這只是一個實驗）

個非常感謝，

奧利弗

來源

2012-11-13 Oliver Smith

歡迎SO。僅供參考，這個問題很可能會被拒絕，因爲它有點模棱兩可，沒有明確的問題要問，而且你沒有包含任何代碼。嘗試修理它一下。 – adamb

感謝adamb，現在已經做出了改變 –

您需要處理淡入的nextdiv在淡出方法的回調回調函數，如果你想在當前動畫完成後要褪色，在未來DIV 。

$(document).ready(function() { 
    $("#blurb > div:gt(0)").hide(); 
    setInterval(function() { 
     $('#blurb >div:first') 
      .fadeOut(1000 , function() { 
       $(this).next(1).delay(1000).fadeIn(1000) 
           .end(1).appendTo('#blurb'); 
      }) 
    }, 5000); 
});

Check Fiddle

來源

2012-11-13 18:28:08

當你說_「你需要處理**那** ......」是什麼？ – gdoron

嗨Sushanth，謝謝你的回答。我把這段代碼放進去，現在它只是靜態的，沒有淡入淡出。我做錯了什麼？ –

@OliverSmith ..不客氣:) –

凌亂的jQuery的div div附加

回答

相關問題