0

我是 jQuery 新手，老实说，我不确定这是否是编写脚本的正确方法！我一直在这里和网络上查看脚本，并将其拼凑在一起。无论如何，我试图让我的形象如下......

  1. 向左滑出。
  2. 暂停（延迟？） 3 秒。
  3. 滑回右侧。
  4. 完成动画，然后才能再次将鼠标悬停在它上面。

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

现在，如果你将鼠标悬停在标签上多次，很快，它就会有这个“紧张？” 对它的影响，我不确定这是怎么引起的。

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

4

1 回答 1

1

这个其实挺复杂的。

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

您需要利用回调来获得所需的操作顺序。我还利用该data属性来跟踪何时应该触发/不触发事件。我还必须更改您的 CSS 并将其animate从show. 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);
    });
}​
于 2012-04-17T17:40:58.680 回答