fadeOut first div然后淡出第二个div [英] fadeOut first div then fadeIn second div

问题描述

有一个问题我需要做一些像淡化的横幅 - 一个div淡出然后第二个div淡入，这是代码：

got a problem i need to do something like a fading banner - one div fading out then second div fading in, here's the code:

$(document).ready(function() {
    setTimeout(function() {
        $('#zeus').fadeOut(1000);
     }, 5000);
    $('#zeuss').hide();
    setTimeout(function(){
        $('#zeuss').fadeIn(1000);
    }, 6000);
});

它有效，但在 #zeuss 之后在那时它只是留在这里。我需要反复这样做。并且请不要使用.delay（），因为我在jquery上1.3.2

it works, but after #zeuss fades in then it just stays here. I need to do that repeatedly. And please don't offer to use .delay() because im on jquery 1.3.2

编辑。默认情况下
#zeus 显示在页面上，我希望将其淡出然后淡入 #zeuss ，然后再次淡入 #zeus 然后淡出 #zeus 并淡入 #zeuss 等..

EDIT. by default #zeus is shown on the page, i want to fade it out then fade in #zeuss, then again fade in #zeus and then fade out #zeus and fade in #zeuss etc..

推荐答案

通常情况下，一般的可扩展解决方案更简单：

更新：接受jfriend00的建议，并从多个计时器转移到完成功能，以防止累积错误。

/**
 * Fade-cycles elements with class 'banner'
 */
$(document).ready(function() {

    var delay = 3000, fade = 1000; // tweak-able
    var banners = $('.banner');
    var len = banners.length;
    var i = 0;

    setTimeout(cycle, delay); // <-- start

    function cycle() {
        $(banners[i%len]).fadeOut(fade, function() {
            $(banners[++i%len]).fadeIn(fade, function() { // mod ftw
                setTimeout(cycle, delay);
            });
        });
    }

});

• DEMO 使用jQuery 1.3.2



这篇关于fadeOut first div然后淡出第二个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！