兩個淡入淡出切換效果之間的jQuery延遲

Question

我正在使用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/ 。 在顯示和隱藏的主滑塊下有圖標和文本。

Answer 1

您應該注意時序和setInterval它會使事情變得很糟糕。

如果是時間問題：

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

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

希望這會有所幫助，但仍不確定您要做什么

Answer 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);

Answer 3

嘗試這個：

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