Question

我正在试图弄清楚我的jquery动画是怎么回事，而且我所尝试的一切都没有解决问题。

如果你去这里，你会看到问题：

当您翻转其中一个缩略图时，它有时会隐藏并快速连续显示。如果我试图在动画制作之前确保它没有动画，那么有时标题只会粘在一起并且永远不会动画出来。使用回调也是一样的。这是我目前的代码：

HTML：

<div class="thumb">
    <img src="temp/thumb.jpg" alt="Thumb"/>
    <div class="thumb_overlay">
        <p>Hunter Douglas</p>
    </div>
    <img class="thumb_plus" alt="View Larger Image" src="images/site/icon_plus.png"/>
</div>

JS

    $('.thumb').mouseover(function(){

        if ($chosenThumb != null){
            $lastThumb = $chosenThumb;
        }

        $chosenThumb = $(this);

        console.log($lastThumb + "|" + $chosenThumb + "|" + ($lastThumb == $chosenThumb)); //THIS NEVER EVALUATES AS TRUE - WHAT'S UP WITH THAT?

        if ($lastThumb != $chosenThumb && $lastThumb != null){
            $lastThumb.children('.thumb_overlay').animate({ 'height' : '0px'}, 200);
            $lastThumb.children('.thumb_plus').animate({'height' :'0px', 'width' : '0px' },200);
        }

    if ($chosenThumb != $lastThumb){
        $chosenThumb.children('.thumb_overlay').animate({ 'height' : '30px'}, 200);
        $chosenThumb.children('.thumb_plus').animate({'height' :'31px', 'width' : '31px' },200);
    }
});

要使其正常工作，我需要做些什么？

Answer 1

您的问题是您的鼠标悬停事件在容器上。当元素在元素上方移动时，它会将鼠标悬停在元素上，鼠标悬停事件会触发mouseout事件。

解决方案是创建一个透明地阻挡整个拇指的元素，它可以拦截事件而不会触发鼠标移除。

<div class="thumb">
    <img src="temp/thumb.jpg" alt="Thumb"/>
    <div class="thumb_overlay">
        <p>Hunter Douglas</p>
    </div>
    <img class="thumb_plus" alt="View Larger Image" src="images/site/icon_plus.png"/>
    <div class="block_thumb"></div>
</div>

如果你把你的事件放在.block_thumb上，你让block_thumb有绝对定位，高度和宽度等于.thumb的高度和宽度你应该没问题。

Answer 2

在动画播放之前放入stop()。例如：

$lastThumb.children('.thumb_overlay').stop().animate({ 'height' : '0px'}, 200);

Answer 3

您必须在同一个对象上启动另一个动画之前停止当前动画，因为它们已排队等等。

将if更改为

if ($lastThumb != $chosenThumb && $lastThumb != null){
    $lastThumb.children('.thumb_overlay').stop().animate({ 'height' : '0px'}, 200);
    $lastThumb.children('.thumb_plus').stop().animate({'height' :'0px', 'width' : '0px' },200);
}

if ($chosenThumb != $lastThumb){
    $chosenThumb.children('.thumb_overlay').stop().animate({ 'height' : '30px'}, 200);
    $chosenThumb.children('.thumb_plus').stop().animate({'height' :'31px', 'width' : '31px' },200);
}

Answer 4

如果问题是鼠标悬停多次触发，则在那里添加条件以确保它不会发生

例如，尝试使用此代码（请参阅“is-animating”行）：

$('.thumb').mouseover(function(){

        // is this already animating?
        var $this=$(this);
        if ($this.data('is-animating')) {
            return;
        }

        if ($chosenThumb != null){
            $lastThumb = $chosenThumb;
        }

        $chosenThumb = $this;

        // mark this so future events know it's already animating
        $this.data('is-animating', true);

        console.log($lastThumb + "|" + $chosenThumb + "|" + ($lastThumb == $chosenThumb)); //THIS NEVER EVALUATES AS TRUE - WHAT'S UP WITH THAT?

        if ($lastThumb != $chosenThumb && $lastThumb != null){
            $lastThumb.children('.thumb_overlay').animate({ 'height' : '0px'}, 200);
            $lastThumb.children('.thumb_plus').animate({'height' :'0px', 'width' : '0px' },200);
        }

    if ($chosenThumb != $lastThumb){
        $chosenThumb.children('.thumb_overlay').animate({ 'height' : '30px'}, 200);
        $chosenThumb.children('.thumb_plus').animate({'height' :'31px', 'width' : '31px' },200);
    }

    // unmark it after the animation's finished
    setTimeout(function() {
        $this.data('is-animating', false);
    }, 200);

});

jquery监听器表现不正常

4 个答案: