Question

查看使用javascript（jQuery）实现菜单的最佳方法，我可以使用fade out fadeIn效果更改单击菜单的内容，即html隐藏。

IDEA

有一个菜单，当我点击想要激活按钮和内容，并使用fadeOut效果并替换我点击的内容时。（可以添加活动类以便更好地使用css）

问题

我遇到的主要问题是因为它有时间fadeOut和fadeIn内容出现之前其他内容消失了。

寻找解决方案

我正在寻找实施的最佳方式：



菜单，如果“href”是获取内容的最佳方式



解决淡出淡出效果的主要问题。特别是如果你在按钮之间快速点击，它似乎会中断（我在示例中增加了一点时间来检查它更好）



在菜单和图库

中添加“有效”课程

启动here

的小例子

Answer 1

您需要使用的是fadeIn和fadeOut回调属性。通过这种方式，您可以正确地对它们进行排序并使它们按照您希望的方式运行，如下所示：

$('#button').click(function(){
    $(this).fadeOut('fast', function(){
         $(this).load('yourcontent.php', function(){
              $(this).fadeIn('fast');
              $(this).addClass('active');
         }
    }
}

如果您使用加载功能加载内容，则上述代码应该会有所帮助。但是，如果您在每个按钮上使用静态内容，则还可以使用.html函数在按钮中加载内容。

您可以使用jQuery选择器调用该按钮，就像我在上面的示例中所做的那样，或者您可以使用onclick属性：

<a onclick="example('one')">Test Button</a>

然后javascript将是：

function example(id){
     $('#' + id).fadeOut('fast', function(){
         $(this).load('yourcontent.php', function(){
             $(this).fadeIn('fast');
             $(this).addClass('active');
         }
     }
}

更新3

我更新了上面的函数来做我认为你的意思，画廊的id作为参数。这次有停止功能。

$('#menu li').click(function(){
    $('.gallery').queue("fx", []);
    $('.gallery').stop(true, true);
    var which = $('a', this).attr('href'); 
    $('.gallery.active').fadeOut(2000, function(){
        $(this).removeClass('active');
        if($(which).attr('class') != 'active'){
            $(which).fadeIn(2000, function(){
                $(this).addClass('active');
            });
        }
    });
});

Answer 2

如果我正确地理解了你的问题，你想要在一个画廊消失而另一个画廊消失时停止这样的延迟。最简单的方法是隐藏当前显示的画廊（而不是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);  
  });

实现更改fade的最佳方法fadeOut Content菜单Jquery

2 个答案:

更新3