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

试试这个：

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();
    });
});

Answer 2

这将解决您的问题：

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');
});
});

更新了 Fiddle

Answer 3

您需要重置不透明度，因为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 4

当鼠标仍在内部时，你需要设置'mouseleave'功能 'floater'div。
试试这个（我已经在你设置的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
    });
  });
 });
 .....

mouseenter和mouseleave函数的一些问题

4 个答案: