javascript - mouseenter 和 mouseleave 函数的一些问题

Question

我有这个功能：

$(".insidediv").hide();

$(".floater").mouseenter(function(){
    $(".hideimg").fadeOut(function(){
        $(".insidediv").fadeIn();
    });
});

$(".floater").mouseleave(function(){
    $(".insidediv").fadeOut(function(){
        $(".hideimg").fadeIn();
    });
});

为制作小动画而构建的功能，当您“鼠标输入” div 时，我在那里的图片被隐藏，并且显示了一些文本。如果我慢慢移动鼠标，它工作正常。但是，如果我将鼠标快速移到 div 上，功能会变得混乱或其他东西，它会同时显示 '.insidediv 和 .hideimg，我该如何解决这个小问题，这样它就不会同时显示了？谢谢！

Answer 1

您需要重置不透明度，因为fadeIn并fadeOut使用此 css 属性进行动画处理。仅仅停止动画是不够的。

这应该有效：

var inside = $(".insidediv"),
img = $(".hideimg");
duration = 500;

inside.hide();

$(".floater").mouseenter(function () {
    if (inside.is(":visible"))
        inside.stop().animate({ opacity: 1 }, duration);
    img.stop().fadeOut(duration, function () {
        inside.fadeIn(duration);
    });
});

$(".floater").mouseleave(function () {
    if (img.is(":visible"))
        img.stop().animate({ opacity: 1 }, duration);
    inside.stop().fadeOut(duration, function () {
        img.fadeIn(duration);
    });
});

我刚刚介绍了duration变量来获得等长的动画。

这是一个工作小提琴： http: //jsfiddle.net/eau7M/1/（从之前对其他帖子的评论修改）

Answer 2

当鼠标仍在“浮动”div 内时，您需要设置“mouseleave”功能。
试试这个（我已经在你设置的 jsfiddle 上试过了，它可以工作）：

.....

<div class="floater">Float</div>
<div class="insidediv">inside</div>
<div class="hideimg">img</div>

var inside = $('.insidediv'),
img = $('.hideimg');

inside.hide();

$('.floater').mouseenter( function() {
  img.stop().hide();
inside.show( function() {
    $('.floater').mouseleave( function() {
      inside.hide();
        img.fadeIn();
        inside.stop();  // inside doesn't show when you hover the div many times fast
    });
  });
 });
 .....

Answer 3

这将解决您的问题：

var inside = $(".insidediv"),
img = $(".hideimg");

inside.hide();

$(".floater").hover(function () {
img.stop(true).fadeOut('fast',function () {
    inside.stop(true).fadeIn('fast');
 });

},function () {
inside.stop(true).fadeOut('fast',function () {
    img.stop(true).fadeIn('fast');
});
});

更新小提琴

Answer 4

尝试这个：

var $insideDiv = $(".insidediv");
var $hideImg = $(".hideimg");
$insideDiv.hide();
$(".floater").mouseenter(function(){
    $hideImg.finish().fadeOut(function(){
        $insideDiv.fadeIn();
    });
}).mouseleave(function(){
    $insideDiv.finish().fadeOut(function(){
        $hideImg.fadeIn();
    });
});