Question

我有这样的代码来显示/隐藏弹出窗口和divs

    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：

队列（默认值：true）类型：布尔值或字符串布尔指示是否将动画放在效果队列中。如果是假的话动画将立即开始。截至jQuery 1.7，队列选项也可以接受一个字符串，在这种情况下动画被添加到该字符串表示的队列。使用自定义队列名称时动画不会自动启动;你必须打电话 .dequeue（“queuename”）启动它。

jQuery切换背景图像

1 个答案: