Javascript 对象在其上滑动时消失，而在其上淡入时消失

我对一些jQuery fadeIn效果有问题。这实际上是在这个网站上：。当您从主菜单中选择任何选项，并且在页面加载过程中，滑动菜单按钮时，菜单淡出，则会出现此问题。然后，其中一些您正在淡入淡出的颜色将不会显示，或将显示为略微淡出。 我已将此代码用于按钮：

HTML:

JQUERY：

$(document).ready(function(){
$("nav a").mouseenter(function () {
    $('div', this).stop(true, false).animate({
        'height': '65px'
    }, 100);
    $(this).stop(true, false).animate({
        'padding-top': '5px'
    }, 300);
}).mouseleave(function () {
    $('div', this).stop(true, false).animate({
        'height': '0px'
    }, 300);
    
    $(this).stop(true, false).animate({
        'padding-top': '25px'
    }, 500);
});

    
$('#b1, #b2, #b3, #b4, #b5, #b6, #b7').hide();
    
for (var i=1; i<99; i++) {
  (function(i){
    setTimeout(function() {
       $('#b'+i).fadeIn(500);
     }, 300+100*i);
  })(i);
}
 });    

JS小提琴在这里：

在淡入时将鼠标滑动到按钮上，您将了解我的意思。 基本上，我希望按钮能够正常显示，这样鼠标在按钮上滑动时，就不会干扰按钮，使其衰减到100%

---

提前感谢您提供此问题的任何解决方案。

只需从mouseenter和mouseleave处理程序返回即可。如果元素正在设置动画，您可以使用.is'：animated'来执行此操作

见工作

更新：我的上述解决方案将在元素设置动画时退出，但也包括mouseenter、mouseleave处理程序的自身动画，我们只希望在fadein动画中退出，以便区分我在开始淡入元素时设置了一个名为“淡入”的属性，并在淡入效果结束时将其移除，因此，我们可以在mouseenter mouseleave处理程序中检查此属性

看

我将代码粘贴到这里：

$(document).ready(function(){
    $("nav a").mouseenter(function () {
        if ($(this).data('fading'))  //EXIT IF WE ARE FADING
            return;
        $('div', this).stop(true, false).animate({
            'height': '65px'
        }, 100);
        $(this).stop(true, false).animate({
            'padding-top': '5px'
        }, 300);
    }).mouseleave(function () {
        if ($(this).data('fading'))  //EXIT IF WE ARE FADING
            return;
        $('div', this).stop(true, false).animate({
            'height': '0px'
        }, 300);

        $(this).stop(true, false).animate({
            'padding-top': '25px'
        }, 500);
    });


    $('#b1, #b2, #b3, #b4, #b5, #b6, #b7').hide();

    for (var i=1; i<99; i++) {
      (function(i){
        setTimeout(function() {
            $('#b'+i).data('fading', true).fadeIn(500, function() {
               $(this).data('fading', false);
            });
         }, 300+100*i);
      })(i);
    }   
 });

---

我认为问题在于，你在元素初始化之前就停止了动画

我已经为您创建了一个小提琴，使用fadeIn回调在第一次显示后附加悬停：

$(document).ready(function(){

var appendHover = function () {    
    $("nav a").mouseenter(function () {
        $('div', this).stop(true, false).animate({
            'height': '65px'
        }, 100);
        $(this).stop(true, false).animate({
            'padding-top': '5px'
        }, 300);
    }).mouseleave(function () {
        $('div', this).stop(true, false).animate({
            'height': '0px'
        }, 300);

        $(this).stop(true, false).animate({
            'padding-top': '25px'
        }, 500);
    });
}


    $('#b1, #b2, #b3, #b4, #b5, #b6, #b7').hide();

    for (var i=1; i<99; i++) {
      (function(i){
        setTimeout(function() {
            $('#b'+i).fadeIn(500, function() {appendHover();});
         }, 300+100*i);
      })(i);
    }   
 });

---

不幸的是，这个问题仍然存在。按钮稍微多一些，但问题仍然存在。谢谢。问题已经解决了，但是现在当你鼠标移出按钮时，动画不会返回到以前的状态。是的，我已经更新了我的答案，解释了这个问题并解决了这个问题。

$(document).ready(function(){

var appendHover = function () {    
    $("nav a").mouseenter(function () {
        $('div', this).stop(true, false).animate({
            'height': '65px'
        }, 100);
        $(this).stop(true, false).animate({
            'padding-top': '5px'
        }, 300);
    }).mouseleave(function () {
        $('div', this).stop(true, false).animate({
            'height': '0px'
        }, 300);

        $(this).stop(true, false).animate({
            'padding-top': '25px'
        }, 500);
    });
}


    $('#b1, #b2, #b3, #b4, #b5, #b6, #b7').hide();

    for (var i=1; i<99; i++) {
      (function(i){
        setTimeout(function() {
            $('#b'+i).fadeIn(500, function() {appendHover();});
         }, 300+100*i);
      })(i);
    }   
 });