JQuery тумблер фоновое изображение

Question

У меня есть такой код, чтобы показать/скрыть всплывающие окна и дивы

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 Doc:

очереди (по умолчанию: правда) Тип: Boolean или Строка логическое значение, указывающее ли поместить анимацию в очереди эффектов. Если false, анимация начнется немедленно. Начиная с jQuery 1.7, опция очереди также может принимать строку, и в этом случае анимация добавляется в очередь , представленную этой строкой. Когда используется пользовательское имя очереди, анимация не запускается автоматически; вы должны позвонить .dequeue («queuename»), чтобы запустить его.