jquery - 无法让我的延迟功能工作

Question

我正在尝试用 CSS 和 jQuery 制作卡片翻转。在我使用它的情况下，正面需要在溢出隐藏容器中，当它翻转时，它需要在溢出可见容器中。

这是我的例子：

$('.front').click(function(){
    $('#card').toggleClass('flipped');
    $('.container').toggleClass('flippedContainer');
});
$('.back').click(function(){
    $('#card').toggleClass('flipped');
    $('.container').delay(500).toggleClass('flippedContainer');
})

http://jsfiddle.net/ANfuL/

正如您注意到从前到后的工作正常，但我需要类切换等待半秒才能切换。我尝试了延迟，但它似乎没有做任何事情。

我能做些什么？

Answer 1

delay默认情况下仅适用于效果队列。尝试setTimeout改用：

setTimeout(function(){$('.container').toggleClass('flippedContainer');},500);

Answer 2

我编辑了您的代码以使用 javascript 的 setTimeout 方法。你可以在这里看到更新：

http://jsfiddle.net/nickadeemus2002/fT8KJ/

$('.front').click(function(){
        $('#card').toggleClass('flipped');
        $('.container').toggleClass('flippedContainer');
    });
    $('.back').click(function(){
        //waits half second
        setTimeout(function(){
           $('#card').toggleClass('flipped');
           $('.container').delay(500).toggleClass('flippedContainer');
        },500);


        //$('#card').toggleClass('flipped');
        //$('.container').delay(500).toggleClass('flippedContainer');
    })

我基本上通过添加 setTimeout 更改了您的“.back”单击事件处理程序。在 setTimeout 中，我创建了一个函数来实现您的原始 .back 代码并指定在它触发之前需要经过的时间。

Answer 3

delay只能用于 jQuery 队列中的动画效果。

你需要使用setTimeout();

http://jsfiddle.net/ANfuL/5/

Answer 4

该.delay()方法最适合在排队的 jQuery 效果之间进行延迟。因为它是有限的——例如，它不提供取消延迟的方法——.delay() 不能替代 JavaScript 的本机setTimeout函数，这可能更适合某些用例。

$('.back').click(function(){
     setTimeout(function(){
       $('#card').toggleClass('flipped');
       $('.container').delay(500).toggleClass('flippedContainer');
    },500);
 })

演示--> http://jsfiddle.net/ANfuL/7/