Question

我有一些jQuery fadeIn效果的问题。这实际上是在这个网站上：website here。当您从主菜单中选择任何选项并在页面加载期间（菜单淡入）滑动菜单按钮时，会出现问题。然后它们中的一些（你正在褪色的那个）将不会出现，或者会显得略微褪色。我已将此代码用于按钮：

HTML：

            <nav>
                <a id="b1" href="index.html"><span>01. <strong>ABOUT US</strong></span><div></div></a>
                <a id="b2" href="webdesign.html"><span>02. <strong>WEBSITE DESIGN</strong></span><div></div></a>
                <a id="b3" href="mobile-websites.html"><span>03. <strong>MOBILE WEBSITES</strong></span><div></div></a>
                <a id="b4" href="captive-portals.html"><span>04. <strong>CAPTIVE PORTALS</strong></span><div></div></a>
                <a id="b5" href="portfolio.html"><span>05. <strong>PORTFOLIO</strong></span><div></div></a>
                <a id="b6" href="contact-us.html"><span>06. <strong>CONTACT US</strong></span><div></div></a>
            </nav>

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 FIDDLE HERE： http://jsfiddle.net/tucado/9hhZW/

（在淡入时将鼠标滑过按钮，你会明白我的意思）。基本上我希望按钮正常显示，因此滑动鼠标不会在淡入100％时中断它们。

提前感谢您解决此问题。

Answer 1

如果要对动画元素进行动画处理，只需从mouseenter和mouseleave处理程序返回，就可以使用.is(':animated')执行此操作。

见工作fiddle

更新：我的上述解决方案将在元素动画时退出，但也包含了自己的mouseenter，mouseleave处理程序的动画，我们只想退出它是fadein动画，所以要区分我在开始淡化元素时设置了一个名为fading的属性，并在结束淡入淡出效果时将其删除，因此我们可以在mouseenter mouseleave处理程序中检查此属性。

请参阅new working fiddle

我在这里粘贴代码：

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

Answer 2

我认为问题是，在首先初始化元素动画之前先停止它们（首先是fadeIn（）;）

我为你创建了一个小提琴，使用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);
    }   
 });

http://jsfiddle.net/9hhZW/2/

物体在它们淡入时滑过它们时会消失

2 个答案: