시간 초과 된 텍스트 교환?

Question

javascript/jQuery를 사용하여 텍스트 단락을 바꿀 수 있습니까? 약 5 초 지연 타이머가 필요하고 텍스트를 이미지 슬라이드처럼 다른 것으로 바꿔야합니다. 페이드 (fade) 나 효과 (effect)로 굉장 할 것입니다. 나에게 올바른 방향으로 나를 가르치거나 나를 도울 수 있니?

Answer 1

방법 루프에서는 setTimeout없이 또는 setInterval을

DEMO HERE

<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() 
}); 

Answer 2

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

당신이 먹고 싶어한다면 더

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

Answer 3

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

당신이 다음 함수 내에서 반복되는 문자열의 배열을 가지고 changetext을 구현할 수

:

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

Answer 4

바로 위에 퇴색시키려는 콘텐츠를 넣으십시오 (이름은 #box).. display:none;으로 숨 깁니다. 이 그런 예를 들어 사용

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

Answer 5

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>