Question

我是jQuery的新手。有人可以帮我解决我的2天问题。我只需要一个淡入淡出效果的示例代码，幻灯片。

这是风格。

这将是3个同等级的Div。
第一个div将显示6secs然后淡出2secs
- 在第一个淡出之前，第二个div将淡入2secs
- 这将再次显示6secs然后淡出2secs。
然后第三个div将以相同的方式消退2秒。
将显示6secs然后淡出2secs。然后他们将旋转或循环。

感谢您帮助我。

编辑 - 评论中的相关代码

$(document).ready(function(){ 
    function looptour(){ 
        $("#health").hide();
        $("#billing").hide(); 
        $("#pension").delay(6000).fadeOut(2000);            
        $("#health").delay(6000).fadeIn(2000).delay(6000).fadeOut(2000);    
        $("#billing").delay(14000).fadeIn(2000).delay(6000).fadeOut(2000); 
        $("#pension").delay(14000).fadeIn(2000,looptour); 
   } 
   looptour(); 
});

Answer 1

我不确定您的确切问题是什么，因为您的代码似乎对我有用。

如果是我，我可能会有所不同（假设我理解了预期的结果）。

试一试： http://jsfiddle.net/XgFna/2/

var arr = [
    $("#pension"),
    $("#health").hide(),
    $("#billing").hide()
];
var cur = 0, nxt = 1;

setInterval(function() {
    arr[cur].fadeOut(2000);
    arr[nxt].fadeIn(2000);
    cur = (cur + 1 < arr.length) ? cur + 1 : 0;
    nxt = (nxt + 1 < arr.length) ? nxt + 1 : 0;
},6000);

Answer 2

$(document).ready(function() {
    function looptour() {
        $(".quote4").hide();
        $(".quote3").hide();
        $(".quote2").hide();
        $(".quote1").delay(1000).fadeIn(3000).delay().fadeOut(1000);
        $(".quote2").delay(7000).fadeIn(3000).delay().fadeOut(1000);
        $(".quote3").delay(11000).fadeIn(3000).delay().fadeOut(1000);
        $(".quote4").delay(16000).fadeIn(6000).delay().fadeOut(1000, looptour);
    }

    looptour();
});

这就是我做的，你只需要照顾延迟。

Div ID淡入淡出代码

2 个答案: