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函数，这可能更适合某些用例。 / p>

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

DEMO --> http://jsfiddle.net/ANfuL/7/

无法使我的延迟功能起作用

4 个答案: