定時文本交換？

是否可以用javascript/jQuery交換一段文字？我想要一個約5秒的延遲計時器，然後文本應該交換到其他東西，如圖像幻燈片。用淡入淡出或效果會很棒，但無論什麼作品。你能指點我正確的方向還是幫助我？定時文本交換？

2011-07-05 lukas

什麼加價是你的工作？你已經嘗試了什麼？發生了什麼，或者出錯了？你堅持什麼樣的部分？ –

這裏的任何東西http://stackoverflow.com/search?q=jquery+animate+delay – mplungjan

可能重複的[jquery動畫重複代碼。]（http://stackoverflow.com/questions/5311972/jquery-animation-repeating-代碼） – mplungjan

這裏是如何循環沒有的setTimeout或setInterval的

<div id="textMessage"></div> 
<div class="textContent" style="display:none">Lorem ipsum dolor sit amet</div> 
<div class="textContent" style="display:none">In sit amet diam et arcu aliquam tincidunt. </div> 

function slide() { 
    if (cnt>=texts.length) cnt=0; 
    $('#textMessage').html(texts[cnt++]); 
    $('#textMessage') 
    .fadeIn('slow').animate({opacity: 1.0}, 3000).fadeOut('slow', 
    function() { 
     return slide() 
    } 
);  
}  
$(document).ready(function() { 
    // save the texts in an array for re-use 
    $(".textContent").each(function() { 
    texts[cnt++]=$(this).text(); 
    }); 
    slide() 
});

來源

2011-07-05 13:24:32 mplungjan

setTimeout(function() { 
    $('#target').html('New Text'); 
}, 5000); // <- 5 seconds

，如果你想採取進一步

setInterval(function() { 
    // do some change that will happen every 5 seconds 
}, 5000); // <- 5 seconds

來源

2011-07-05 12:26:14

爲什麼不延遲和/或動畫？ – mplungjan

謝謝，我會嘗試這個代碼，是的。我希望它循環，以便代碼很好。 – lukas

我想這並不重要，但通常對於這樣簡單的事情，我更喜歡setTimeout/setInterval，因爲它對我來說更清晰一些。但至於開銷和/或其他好處，我想不出任何 –

function changeText(){ 
    document.getElementById('my_div_id').innerHTML = 'text_to_display'; 
}

可以實現changetext在其上迭代的下一個函數內部有一個字符串數組：

function timingex(){ 
    setTimeout("changeText()",5000); 
}

來源

2011-07-05 12:28:11

避免eval：'setTimeout（changeText，5000）;' – mplungjan

把你的內容，你想淡入（我們可以命名它#box），在頂部。用display:none;將其隱藏。然後，例如，使用：

function() { 
    $("#box").delay(5000).fadeIn("slow"); 
}

來源

2011-07-05 12:30:39 Steeven

Here you go

可以調用函數的setTimeout以及

編輯：

Here is the tweaked demo, without a click and with interval

編輯2：

在jsfiddle發生故障的情況下，複製粘貼代碼。

<div class="texts"> 
    <p class="text text_1">text 1</p> 
    <p class="text text_2">text 2</p> 
</div> 

<script> 
    setInterval(function(){ 
    var toggle = $(".text").hasClass("toggled"); 
    $(".text_1").animate({opacity: toggle ? 1 : 0}); 
    $(".text_2").animate({opacity: toggle ? 0 : 1}); 
    $(".text").toggleClass("toggled"); 
    }, 1000); 
</script> 

<style type="text/css"> 
.texts { 
    position: relative; 
} 

.text { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

.text_1{ 
    opacity: 1 
} 

.text_2{ 
    opacity: 0; 
} 
</style>

來源

2011-07-05 12:33:03 egze

爲什麼不添加一個回調使其循環和onload所以不需要點擊是需要？ – mplungjan

是的，你會如何做到這一點？我希望它每5秒循環一次，而不需要點擊。 – lukas

我不能得到這個工作與循環，沒有按鈕點擊，任何人都知道如何得到這個去？ – lukas

定時文本交換？

回答

相關問題