javascript - 实现更改 fadeIn fadeOut 内容菜单 Jquery 的最佳方式

Question

寻找使用 javascript (jQuery) 实现菜单的最佳方式，我可以在其中更改菜单上的内容，使用淡出 fadeIn 效果，在 html 中隐藏。

想法

Have a menu , when I click want to active the button and the content, and using a fadeOut effect and replace for the content that I clicked. ( Could add the active class for better play with css)

问题

The main problem I have is since it have a time to fadeOut and fadeIn the content appear before the other disappearing the other content.

寻找解决方案

I'm looking the best way to implement :

• The menu, if "href" is the best way to get the content to show

• Solve the main problem of the fade out fade in effect.Special if you're fast clicking between button, it seems to break (I increase a little the time in the example to check it better)

• Add the class "active" in the menu and gallery

开始的小例子here

Answer 1

如果我正确理解您的问题，您希望在一个画廊消失而另一个画廊淡入时停止出现这种延迟。最简单的方法是隐藏当前显示的画廊(而不是 fadeOut) 然后 fadeIn 新选择的画廊。如果您将代码 javascript 更改为此，您会看到结果更加流畅。

  $('#menu li').click(function(event){
      event.preventDefault();
      var $this = $(this);
      var href=  $this.find('a').attr('href');
      $(".gallery").hide();
      $(href).fadeIn(1000);  
  });