jQuery淡入淡出/延迟菜单

Question

我有3个btns，它们是无序列表中的简单锚点标记，每个btns都有相应的t1，t2和t3。我也有3个类似的隐藏在CSS中的btns，它们分别具有t1-discover，t2-discover和t3-discover的ID。我想要实现的是，例如t1在5秒钟后被点击，然后在t1-discover和fadesOut t2-discover和t3discover中发现，对于t2相同& t3。这是我尝试使用jQuery：

$("#t1").click(function() { 
      $("#t2-discover").stop().fadeOut(10); 
      $("#t3-discover").stop().fadeOut(10); 

      // delay fadein of link 
      setTimeout(function() { 
       $('#t1-discover').fadeIn(2000); 
      }, 5000); 

     }); 

     $("#t2").click(function() { 
      $("#t1-discover").stop().fadeOut(10); 
      $("#t3-discover").stop().fadeOut(10); 

      // delay fadein of link 
      setTimeout(function() { 
       $('#t2-discover').fadeIn(2000); 
      }, 5000); 

     }); 

     $("#t3").click(function() { 
      $("#t1-discover").stop().fadeOut(10); 
      $("#t2-discover").stop().fadeOut(10); 

      // delay fadein of link 
      setTimeout(function() { 
       $('#t3-discover').fadeIn(2000); 
      }, 5000);   
     }); 

这有点儿工作，延迟和衰落是有，但是当点击一个BTN不抵消其他2个动画他们淡入，但呆在那里有什么办法说淡入，但也取消并重置其他2个动画？我也想学会更高效地做到这一点，我确信这段代码非常精彩，但我仍然在学习！希望这是有道理的，并提前感谢。

Answer 1

的问题是，其他对象的动画还没有开始，因为它是所谓的超时..

您需要先清除现有超时..

此外，由于你的代码是按你应当概括它，只写一次的每个项目相同..

我会把一个id，你使用像

或

<ul id="#t-list"> 

，并在jQuery的写..

var clear; // this hold the timeoutObject 
// the following selector will find all links 
// that are children to the #t-list element 
$("#t-list a").click(
    function() { 
      // the following will fadeOut all elements whose id 
      // ends in -discover so that it works with an arbitrary number of them.. 
      // the $= in the selector means ends with 
      $("[id$='-discover']").stop().fadeOut(10); 


      var $thisid = this.id; // get the id of the current element so we can use it in the timeout 
      // delay fadein of link 
      // assign the timeout to a variable so we can clear it 
      // later on 
      clearTimeout(clear); //here we remove current timeouts that have not executed yet.. 
      clear = setTimeout(function() { 
            // use the this keyword instead of the actual id 
            // to generalize it. it means use the current item 
            $("[id='"+$thisid+"-discover']").fadeIn(2000); 
            }, 
         5000); 
      } 
); 

Answer 2

您是否试过使用.stop(true,true)删除排队的动画并立即完成当前动画？您也可以组合选择器来减少代码。

$("#t1").click(function() { 
    $("#t2-discover,#t2-discover").stop(true,true).fadeOut(10); 

    // delay fadein of link 
    setTimeout(function() { 
     $('#t1-discover').fadeIn(2000); 
    }, 5000); 

}); 

Answer 3

这是jQuery的queing是为:)你可以使用.delay()和.dequeue()每个元素制成。这将淡出别人瞬间，淡化在5秒内选择一回，并取消所有剩余动画

$("#t1").click(function() { 
    $("#t2-discover, #t3-discover").dequeue().stop().fadeOut(10); 
    $('#t1-discover').delay(5000).fadeIn(2000); 
}); 

$("#t2").click(function() { 
    $("#t1-discover, #t3-discover").dequeue().stop().fadeOut(10); 
    $('#t2-discover').delay(5000).fadeIn(2000); 
}); 

$("#t3").click(function() { 
    $("#t1-discover, #t2-discover").dequeue().stop().fadeOut(10); 
    $('#t3-discover').delay(5000).fadeIn(2000); 
}); 

注意这需要jQuery的1.4 + ......但如果你是刚刚开始，希望这ISN没问题。