JQuery 회전 텍스트 스 니펫/문구

Question

HTML, CSS 및 JQuery 만 사용하여 텍스트 스 니펫을 회전시키고 그 문구에 페이드 인/아웃 효과를 적용하여 다음 페이드 인이 페이드 인 할 때 페이드 아웃됩니다. 다음 코드를 가지고 있지만 페이드 인/아웃 효과를 추가 할 위치를 파악할 수는 없습니다. 또는 페이드 인/아웃 효과가있는 텍스트 조각을 회전시키는 더 좋은 방법이 있습니까? 리소스가 많은 플러그인을 사용하는 것은 과도한 일이므로 플러그인에서 벗어나고 싶습니다. 일부 기본 JQuery 함수를 사용하여 내가 원하는 것을 수행 할 수있는 것처럼 보일 수있다.

HTML :

<h1>I like <span id="phrase">apples</span>.</h1> 

자바 스크립트 : 그냥 페이드 효과를 추가 할 위치를 알아내는 데 도움이 필요 ... http://jsbin.com/ayukac/1/edit :

$(document).ready(function() { 
    function setRandomPhrase() { 
     // Set phrases into an array 
     var phrases = new Array(
      "oranges", 
      "pears", 
      "strawberries", 
      "grapes", 
      "pineapples", 
      "bananas" 
     ); 

     // Selects a random phrase 
     var random = Math.floor(Math.random()*phrases.length); 
     // Sets the area to use that random phrase 
     $("#phrase").text(phrases[random]); 
    } 
    // Fire the function every 5 seconds... 
    setInterval(setRandomPhrase,5000); 
}); 

여기 반 가공 샘플입니다.

도움 주셔서 감사합니다.

Answer 1

이와 비슷한? 현재 열매를 페이드 아웃 후 페이드 아웃 번입니다 완료 값을 업데이트하고, 페이드.

...

var random = Math.floor(Math.random()*phrases.length); 

$("#phrase").fadeOut("slow",function(){ 
    $("#phrase").text(phrases[random]).fadeIn("slow"); 
}); 

... baseic setInterval 기능이 같다

Answer 2

:

setInterval(function() { 
     // Do something every 5 seconds 
}, 5000); 

따라서 모든 작업은 setRandomPhrase에서 수행됩니다.

$("#phrase").fadeOut("slow",function(){ 
     $("#phrase").text(phrases[random]).fadeIn("slow"); 
} 

을 대신의 :

$("#phrase").text(phrases[random]); 

Answer 3

http://jsbin.com/ayukac/2/edit

내가 나타날 같은 단어를 방지하기 위해 기초적인 검사를 추가했습니다 당신이해야 할 일은 는에이를 추가하는 것입니다 임의 선택에서 두 번 연속

var random = Math.floor(Math.random()*phrases.length); 

while (phrases[random] == $("#phrase").text()) 
    { 
    var random = Math.floor(Math.random()*phrases.length); 
    } 
// Sets the area to use that random phrase 
$("#phrase").fadeOut('slow',function(){$("#phrase").text(phrases[random]).fadeIn('slow')}); 

Answer 4

jQuery를 사용하는 경우 왜 jQuery 플러그인을 사용할 수 없습니까? 그런 식으로하고 싶다면 다음 링크를 사용할 수 있습니다. Web Ticker