javascript - 两个淡入淡出切换效果之间的jQuery延迟

Question

我正在使用显示和显示两个 divJquery

代码是

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

setInterval(show_hide, 1500);

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

Answer 1

你应该小心时机，setInterval它可能会把事情搞得一团糟。

如果时间有问题：

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

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

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

Answer 2

试试这个：

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; }

Answer 3

我为您制作了一个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);