Question

我是jQuery的新手并且很荣幸，我不确定这是否是甚至是编写脚本的正确方法！我一直在这里和网上查看脚本，并将它拼凑在一起。无论如何，我正试图让我的形象到下面......

向左滑出。
暂停（延迟？）3秒钟。
向右滑动。
完成动画，然后再将鼠标悬停在它上面。

我做了一个小提琴来帮助解释更好 http://jsfiddle.net/brandonesc/wvezk/179/

现在，如果你多次将鼠标悬停在标签上，快速，它有“紧张吗？”对它的影响，我不确定它是如何造成的。

感谢您的时间，我真的很感激。在过去的3天里，我一直对此感到难过。

Answer 1

这个实际上非常复杂。

http://jsfiddle.net/wvezk/180/

您需要利用回调来获取所需的操作顺序。我还使用data属性来跟踪应该触发/不触发事件的时间。我还必须更改您的CSS并将其从animate切换为show。通过将元素包装在容器中来显示工作。这导致了爆裂效应。

$('#slider').mouseover(function() {
    //if we are animating then punt
    if ($(this).data('animating') == true) {
        return;
    }
    $(this).data('animating', true);

    //animate the move
    $(this).animate({
        left: '-25px'
    }, 500, function() {
        //in callback return to original state
        setTimeout(function() {
            animationCallback();
        }, 1000);
    });
});

function animationCallback() {
    //move back
    $('#slider').animate({
        left: '0px'
    }, 500, function() {
        //in callback trun off animation
        $(this).data('animating', false);
    });
}

向左滑动标签，暂停然后向右滑动

1 个答案: