Question

（原谅我的英语，我是荷兰人）

我正在制作具有多种效果和点击次数的叠加层。要设置叠加层和一般效果（幻灯片，淡入淡出，持续时间......），没有问题。至于某些动作，需要在几秒钟后自动关闭。

这是我的整个动画的jQuery代码。

jQuery.noConflict();
jQuery(document).ready(function() {
    // START DOCUMENT READY

    // Start welkombox overlay
    jQuery(function() {
        jQuery("#welkombox div[rel]").overlay();
    });
    // End welkombox overlay

    // Start slide overlay content
    jQuery('#verhuiskeuze1-wachten').click(function() {
        jQuery('#verhuis-algemeen, #verhuis-wachten').animate(
            { left: "+=100%" }, // what we are animating
            {
                duration: 1000,
                easing: 'easeOutQuad',
            }
        );
    });
    // End slide overlay content

    // END DOCUMENT READY
});

这是身体的简单版本。

<!-- Visable content on page -->
<div id="content-inner">
    <div id="welkombox">
        <div id="box1" rel="#related1">Some content...</div>
        <div id="box2" rel="#related2">Some content...</div>
        <div id="box3" rel="#related3">Some content...</div>
    </div>
</div>

<!-- Overlay content, witch s visible onclick of one of the boxes above -->
<div id="related1" class="overlay">
    <div id="Inside-part1">Some text (button to slide, defind in the Jquery script)</div>
    <div id="Inside-part2">Some text</div>
</div>

<div id="related2" class="overlay">Some content...</div>
<div id="related3" class="overlay">Some content...</div>

现在我想做什么：

如果在正文内容中单击div，则创建叠加层。（DONE）
点击了女巫div容器的引用覆盖。（DONE）
在我的项目中有2个div（作为可点击的项目）和动作。对于其中一个，叠加层中的内容移动到右侧并显示其他一些内容。（DONE）
如果最后一次完成（点击并向右移动），覆盖层会在几秒钟后自动关闭。

最后一件事似乎是不可能的。是否有人可以帮助我？

由于

Answer 1

您正在调用.animate()，但未指定动画完成后将调用的完整函数。这就是您必须设置 overlay 关闭的超时时间。

这就是它的完成方式：

// all code that you already have...

.animate({ left: "+=100%" }, {
    duration: 1000,
    easing: 'easeOutQuad',
    complete: function() {
        window.setTimeout(function(){
            $("selector").hide(); // or .remove()
        }, 1000); // adjust time
    }
});

其他观察

这段代码似乎没必要：

// Start welkombox overlay
jQuery(function() {
    jQuery("#welkombox div[rel]").overlay();
});
// End welkombox overlay

相反，您应该致电：

// Start welkombox overlay
jQuery("#welkombox div[rel]").overlay();
// End welkombox overlay

因为您已经在就绪事件处理程序中。无需添加其他处理程序。这两个是等价的（因为我看到你使用其中两个）：

jQuery(document).ready(function() { /* document read code */ });
// is the same as this shorter version
jQuery(function() { /* document read code */ });

尾随逗号

注意对象中的尾随逗号。例如：

...
{
    duration: 1000,
    easing: "easeOutQuad", // <-- remove this comma
}
...

这将使对象在IE中无效，根本不会创建。 IE对此非常敏感。其他浏览器仍可使用......

延迟然后自动关闭DIV

1 个答案:

其他观察

尾随逗号