Увядание с jquery

Question

Я пытаюсь добавить хороший переход к рандомизированным работам в этой функции, и я не могу заставить его работать, помните, что я новичок в этом. Если бы кто-то мог объяснить, как я мог бы добавить эффект затухания между словами, которые я действительно ценю!

<script type="text/javascript"> 
jQuery(document).ready(function($) { 
words = ['ASS-KICKING','MIND-BLOWING','AWESOME','SWEET']; 
$(function() { 
    setInterval(function() { 
    var thisWord = words[Math.floor(Math.random() * words.length)]; 
    $("#container").text(thisWord); 
    },3000); 
}); 
}); 
</script> 

Спасибо!

Answer 1

firstofall вам не нужны две document.ready функции there.remove one..and для эффекта вы можете использовать fadeIn или slideDown или animation()

попробовать это (используя FadeIn)

<script type="text/javascript"> 
jQuery(document).ready(function($) { 
words = ['ASS-KICKING','MIND-BLOWING','AWESOME','SWEET']; 

setInterval(function() { 
    var thisWord = words[Math.floor(Math.random() * words.length)]; 
    $("#container").hide().text(thisWord).fadeIn('slow'); 
},3000); 
}); 

</script> 

Answer 2

JQuery предоставляет три выцветание: .fadeIn, .fadeOut, .fadeToggle. Все они принимают аналогичные параметры. Одним из этих параметров является обратный вызов, который вызывается после завершения анимации.

Ваш код должен выглядеть следующим образом:

jQuery(document).ready(function($) { 
    words = ['ASS-KICKING','MIND-BLOWING','AWESOME','SWEET']; 

    setInterval(function() { 
     $('#container').fadeOut('slow', function(){ 
      var thisWord = words[Math.floor(Math.random() * words.length)]; 
      $('#container').text(thisWord).fadeIn('slow'); 
     }); 
    },3000); 
}); 

Answer 3

Использование fadeIn() и fadeOut() для этого

И использовать готовую функцию один раз, как,

words = ['ASS-KICKING','MIND-BLOWING','AWESOME','SWEET']; 
$(function() { 
    setInterval(function() { 
     var thisWord = words[Math.floor(Math.random() * words.length)]; 
     $("#container").fadeIn(1500).text(thisWord).fadeOut(1500); 
    },3000); 
}); 

Fiddlehttp://jsfiddle.net/eKE8k/1/

Обновлено Изменение time delay с использованием обратных вызовов

words = ['ASS-KICKING','MIND-BLOWING','AWESOME','SWEET']; 
$(function() { 
    setInterval(function() { 
    var thisWord = words[Math.floor(Math.random() * words.length)]; 
     $("#container").fadeOut(1000,function(){$(this).text(thisWord).fadeIn(1000);}); 
    },5000); 
}); 

скрипкуhttp://jsfiddle.net/eKE8k/2/