Question

如何使用fadeIn（）和fadeOut（）jQuery效果更改2个文本？

以下是一个示例：Apple website。 iPhone图片下方是一个框，“ Hot News Headlines ”。看看新闻如何变化？一个文本淡入，然后淡出，第二个文本即将到来。

我是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);
});

jQuery fadeIn（），fadeOut（）2个文本

3 个答案: