jQuery fadeIn(), fadeOut() 2 个文本答案

【问题标题】：jQuery fadeIn(), fadeOut() 2 textsjQuery fadeIn(), fadeOut() 2 个文本
【发布时间】：2011-05-18 00:38:13
【问题描述】：

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

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

我是 jQuery 新手，所以请提供详细的代码。谢谢！

【问题讨论】：

你可能是 jq 的新手，但至少表现出一些承诺，让我们看看你已经尝试过什么......

标签： jquery text fadein fadeout

【解决方案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/

【讨论】：

这很好，我一直在尝试调整此示例以使用“上一个”和“下一个”按钮场景。我正在尝试调整 nextFade 函数来做相反的事情。请你快速看一下我的小提琴，让我知道为什么 prev 按钮不能很好地工作，谢谢。 jsfiddle.net/gpQYW/441
@H2ONOCK in prevFade，重新设置faderIndex的条件是小于0。除此之外，最后一个索引不是faders.length，而是faders.length-1 .见here
太棒了，对这里感兴趣的人来说，这是我完成的工作示例（我添加了一点，以便在当前动画完成之前无法调用函数）：jsfiddle.net/gpQYW/443

【解决方案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);

    }

【讨论】：

【解决方案3】：

你使用.fadeOut()函数的回调来改变HTML，然后淡入，中间会有闪烁：

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

【讨论】：

我不知道 jQuery，只是单独的元素...... 那么淡出文本的代码将如何呢？以前谢谢！
那是在服务器端，而不是 JavaScript。比方说，一个 PHP 脚本可以做到这一点，而 jQuery 会对其进行动画处理。
我不需要它是动态的，我想要 html 中的 5 个句子，就像 Apple 网站中的
这是通过服务器生成的。但我也会做一个静态的。
感谢搅拌机！太完美了！