jQuery数组fadeIn不起作用

问题描述

我正在尝试将数组中的fadeOut项目淡入div.我正在尝试以fadeIn fadeOut方式进行这项工作.因此，第一项淡入保持3秒，然后淡出，然后淡出另一项，3秒钟然后淡出，依此类推.....为什么我的代码有误.检查 http://jsfiddle.net/Fpu2E/1/

I'm trying to fadeIn an fadeOut items in the array to a div. I'm trying to make this work in a fadeIn fadeOut manner. So first item fades in stays for 3 secodns then fades back out, then the next item fadein, 3seocnds then fade out and so on..... why is wrong with my code. Check http://jsfiddle.net/Fpu2E/1/

推荐答案

由于多种原因，您正在使用的代码无法正常工作-调用fadeOut和fadeIn之间的延迟为零意味着您将无法获得在淡入和淡出之间需要3秒钟的延迟，而调用这两个函数会导致jQuery效果队列产生一些奇怪的效果.

The code you're using won't work for various reasons - having zero delay between calling fadeOut and fadeIn means you won't get the 3 second delay you're looking for between fading in and out, and that calling both functions lead to some strange effects with the jQuery effects queue.

更好的选择是将递归函数与 delay 一起使用:

A better option would be to use a recursive function together with delay to do this:

var div = $('div').hide(),
    news = ['news1', 'news2', 'news3'],
    count = 0;

function changeNews() {
    div.fadeIn(3000).delay(3000).fadeOut(3000, function() {
        changeNews();
    }).text(news[count++]);
}

changeNews();

可以在此处找到一个简单的演示: http://jsfiddle.net/Fpu2E/4/

A simple demo of this can be found here: http://jsfiddle.net/Fpu2E/4/

这篇关于jQuery数组fadeIn不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！