两个淡入淡出切换效果之间的Jquery延迟

时间:2013-02-07 14:36:58

标签: javascript jquery html toggle

我正在使用Jquery

显示和显示两个div

代码是

var show_hide = function () {
    $("#extravagents_label").fadeToggle(function () {
        $("#liquid.liquidContanier").fadeToggle().delay(1500);
    });
}

setInterval(show_hide, 1500);

但有问题。它没有正常工作。当一个完全隐藏时,它应该显示另一个div。请访问 203.81.193.2/jsvt / 。主滑块下方的图标和文本正在显示和隐藏。

3 个答案:

答案 0 :(得分:2)

你应该小心时间和setInterval它会让事情变得非常糟糕。

如果时间问题:

var show_hide = function () {
    $("#extravagents_label").fadeToggle(callblack);
}

var callblack = function () {
    $("#liquid.liquidContanier").fadeToggle()
        .delay(1500).queue(show_hide);
}

希望这有帮助,仍然不确定你在追求什么

答案 1 :(得分:2)

我为你做了jsfiddle,稍微修改了你的代码。基本上你的间隔是每1.5秒发射一次,同时你也在第二个元素上延迟fadeToggle。因为你无法计算jQuery将元素放入和缩小多长时间,所以回调会为你处理它。

var show_hide = function () {
    $("#extravagents_label").fadeToggle(function () {
        $(this).fadeToggle();
        $("#liquid.liquidContanier").fadeToggle(function () {
            $(this).fadeToggle();
            show_hide();
        });
    });
}

setTimeout(show_hide, 1500);

答案 2 :(得分:1)

试试这个:

<强>的jQuery

function show_hide() {
 $('#extravagents_label').delay(1000).fadeOut(1000).delay(1000).fadeIn(1000);
 $("#liquid .liquidContanier").delay(1000).fadeIn(1000).delay(1000).fadeOut(1000);
   //don't forgot to use space between id and it's child class
}

setInterval(show_hide,4000);
           //this timing should be total timing values of the show_hide function

猜测你的 css 应该是这样的:

#extravagents_label { display:block; }
#liquid .liquidContanier { display:none; }