Javascript mouseenter和mouseleave函数的一些问题

我有这个功能：

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

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

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

该函数用于制作一个小动画，当你“mouseenter”div时，我在那里的图片是隐藏的，并且会显示一些文本。 如果我慢慢移动鼠标，效果很好。但是如果我将鼠标快速移动到div上，函数会变得混乱或其他什么，它会显示“.insidediv”和.hideimg， 我怎样才能解决那个小问题，使它不会同时显示出来？谢谢

试试这个：

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

---

这将解决您的问题：

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

---

更新了您需要重置不透明度，因为

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

变量来获得长度相等的动画

---

这是一把有效的小提琴：（修改了之前在其他帖子上的评论）

当鼠标仍在屏幕内时，您需要设置“mouseleave”功能 “漂浮物”部门
试试这个（我已经在jsfiddle-you安装程序上试过了，效果很好）：

。。。。。
浮动
在…内
img
内部变量=$（'.insidediv'），
img=$（'.hideimg'）；
隐藏（）；
$（'.flotter'）.mouseenter（函数（）{
img.stop（）.hide（）；
inside.show（函数（）{
$（'.flotter'）.mouseleave（函数（）{
隐藏（）；
img.fadeIn（）；
inside.stop（）；//将div快速悬停多次时，不会显示inside
});
});
});
.....

在调用

fadeOut

或

fadeIn

之前使用

finish（）

，比如

$（“.hideimg”）.finish（）.fadeOut（..）

你能添加一个带有一些代码的jsfiddle让我们更好地了解你的问题吗？.stop（）在fadeing之前。stop（）.fadeOut（）和我写给上级的一样，它只是停止动画，但不会重置动画。所以它使div的不透明度变低了。。无论如何，我可以“重置”它，这样它就不会得到较低的不透明度？谢谢，我们可以用另一个人使用的JsFIDLE：你可以看到，如果你快速通过DIV，他只是停在中间的fdin。你需要做什么修改？这把小提琴看起来不错。你想变慢还是上下滑动？不，这把小提琴不行。试着用快的方法而不是慢的方法通过div。你会看到褪色停止了，但它只是在褪色的地方停止。这意味着不透明度会降低，但不会回到原始路径。如果我过得很快，我该怎么做呢？它会停止褪色，但会恢复到原来的状态。很抱歉让你头疼，但它会产生相同的结果。。你自己试着用小提琴演奏。。将鼠标快速移动到div上，您将看到淡入刚刚停止，不透明度停留在淡入停止的位置。。我用的是铬。。可能在其他浏览器中会有所不同。。你知道我在说什么吗？顺便说一句，你们似乎不明白我的意思，因为我现在正想弄明白。问题似乎只发生在第一幕（mouseenter），在第二幕中效果完美。

.....

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