jQuery的切換背景圖像

Question

我有這樣的代碼來顯示/隱藏彈出式和div的

function ToggleSendForm() { 

    var effect = 'slide'; 
    var options = { direction: 'right', easing: 'swing' }; 
    var duration = 1000; 
    $(".popup").toggle(effect, options, duration); 
    var effectFade = 'fade'; 
    var durationFade = 1000; 
    $(".toggler").toggle(effectFade, durationFade); 
}; 

function UnToggleSendForm() { 

    var effect = 'slide'; 
    var options = { direction: 'right', easing: 'swing' }; 
    var duration = 1000; 
    $(".popup").toggle(effect, options, duration); 
    var effectFade = 'fade'; 
    var durationFade = 1000; 
    $(".toggler").toggle(effectFade, durationFade); 
}; 

<div class="toggler" style="display: none"></div> 
<div class="popup" style="background-color: #ffffff; display: none"> 
<div class="container" style="padding: 20px"> 

從右側彈出這樣的幻燈片。

我的問題是在幻燈片彈出過程中是透明的。展開後會變成白色。但是當它滑動時我也需要它白色。我錯過了什麼？

Answer 1

{ queue: false }; 

這是由jQuery中的動畫隊列引起的。 在切換選項中將隊列設置爲false。

function ToggleSendForm() { 

    var effect = 'slide'; 
    var options = { direction: 'right', easing: 'swing' }; 
    var duration = 1000; 
    $(".popup").toggle(effect, options, duration); 
    var effectFade = 'fade'; 
    var durationFade = 1000; 
    $(".toggler").toggle(effectFade, { queue: false }, durationFade); 
}; 

function UnToggleSendForm() { 

    var effect = 'slide'; 
    var options = { direction: 'right', easing: 'swing' }; 
    var duration = 1000; 
    $(".popup").toggle(effect, options, duration); 
    var effectFade = 'fade'; 
    var durationFade = 1000; 
    $(".toggler").toggle(effectFade, { queue: false }, durationFade); 
}; 

jQuery的API文檔：

隊列（默認值：真） 類型：Boolean或字符串 布爾值，指示是否 放置動畫效果隊列。如果爲false，則動畫將立即開始。從jQuery 1.7開始，隊列選項 也可以接受一個字符串，在這種情況下，將動畫添加到由該字符串表示的 隊列中。當使用自定義隊列名稱時， 動畫不會自動啓動;您必須致電 .dequeue（「queuename」）啓動它。