jQuery fadeIn (), fadeOut () 2 текста

Question

Как я могу изменить 2 текста с помощью эффектов fadeIn () и fadeOut () jQuery?

Вот пример: Веб-сайт Apple . Под изображением iPhone находится одна клетка " Горячие новости ". Видите, как меняется новость? Один текст исчезает, затем исчезает, а второй идет.

Я новичок в jQuery, поэтому, пожалуйста, дайте подробный код. Спасибо!

Answer 1

Допустим, ваш html выглядит следующим образом:

<div>
    <div class='fadey'>1</div>
    <div class='fadey'>2</div>
    <div class='fadey'>3</div>
</div>

Вы можете сделать что-то вроде:

var faderIndex = 0, //to keep track
    faders = $('.fadey'); //cache, so we won't have to walk the dom every time

function nextFade() {

    //fade out element over 1000 milliseconds, after which call a function
    $(faders[faderIndex]).fadeOut(1000, function() {

        //increase the index and do a check, so we won't overflow
        faderIndex++;
        if (faderIndex >= faders.length)
            faderIndex = 0;

        //fade in the next element, after which call yourself infinitely
        $(faders[faderIndex]).fadeIn(1000, nextFade);
    });
}
//get the ball rolling
nextFade();

Живой пример: http://jsfiddle.net/gpQYW/

Answer 2

Рассмотрим следующий HTML:

<span class="rotateText">Test</span>
<div class="rotateArray">
    <a href="http://www.google.com">Google.com</a>
    <a href="http://www.microsoft.com">Microsoft.com</a>
    <a href="http://stackoverflow.com">Stackoverflow.com</a>
    <a href="http://www.wired.com">Wired.com</a>
</div>

и сценарий:

   $(function () {
        // set first
        $('.rotateText').html($('.rotateArray a').eq(0));
        // enter loop
        rotateText();
    });

    function rotateText() {         
        var count = $('.rotateArray a').length;
        var i = 0;
        var loopArr = $('.rotateArray a');
        var rotationElm = $('.rotateText');
        window.setInterval(function () {
            rotationElm
                    .fadeOut(400)
                    .queue(function () {
                        $(this).html('<a href="' + loopArr.eq(i).attr('href') + '">' + loopArr.eq(i).text() + '</a>');
                        if (++i == count) i = 0;                           
                        $(this).dequeue();
                    })
                    .fadeIn(400)
                    ;
        }, 4000);

    }

Answer 3

Вы используете функцию обратного вызова функции .fadeOut(), чтобы изменить HTML, а , а затем затухают, так как в середине будет мерцать:

$('#foo').fadeOut(500, function() {
  $(this).html('<span>Bar</span>');
  $(this).fadeIn(500);
});