jQuery-动画过渡被悬停中断 [英] jQuery - Animation transition interrupted by hover

问题描述

我创建了一个div，可以从视口外部滑入并将其放置在原始div上.

I have created a div to slide in from outside of the viewport and place itself over the original div.

将鼠标悬停在box1上即可触发动画.这将使box2代替box1.

The animation is triggered by hovering over box1. This will bring box2 in place of box1.

当鼠标离开box2 div时，它将再次放置在视口之外.

When the mouse leaves the box2 div, it will be placed outside of the viewport again.

但是，此div中缓慢的光标移动将导致动画快速触发.

However, slow cursor movement within this div will result in animation triggering rapidly.

 $(document).ready(function() {
$('.box1').mouseover(function() {
    $('.box2').stop().animate({
        top: 0
    }, 100);
}).mouseout(function() {
    $('.box2').stop().animate({
        top: '-200px'
    }, 100);
});
});

下面的小提琴应该会出现问题.

The following fiddle should present the problem.

http://jsfiddle.net/B9wx8/

推荐答案

这样做，将两个元素绑定在一起，就可以解决问题

Do like this, Bind event for both elements, it would solve the issue

$(document).ready(function () {
    $('.box1,.box2').mouseenter(function () {
        $('.box2').stop().animate({
            top: 0
        }, 'slow');
    }).mouseleave(function () {
        $('.box2').stop().animate({
            top: '-200px'
        }, 'slow');
    });
});

这篇关于jQuery-动画过渡被悬停中断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！