0

我对一些 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>

查询：

$(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 小提琴在这里：http: //jsfiddle.net/tucado/9hhZW/

（在淡入时将鼠标滑过按钮，您就会明白我的意思）。基本上我希望按钮正常显示，这样在它们上方的滑动鼠标就不会中断它们褪色到 100%。

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

4

2 回答 2

1

如果元素正在动画，只需从 mouseenter 和 mouseleave 处理程序返回，您可以使用.is(':animated').

见工作小提琴

更新：我上面的解决方案将在元素动画时退出，但这也包括mouseenter，mouseleave处理程序自己的动画，我们只想在它是淡入淡出动画时退出，所以为了区分我设置了一个fading在开始时调用的属性淡化一个元素并在它结束淡化效果时将其移除，因此我们可以在 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);
    }   
 });
于 2013-03-29T14:18:18.303 回答
0

我认为问题是，在元素初始化之前停止元素动画（第一个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/

于 2013-03-29T14:19:43.737 回答