jquery淡入淡出和切换

我有一个简单的网页，上面有一个主

h1

，底部有两个面板面板1可见，面板2具有类

。隐藏

我想做的是：
当我点击
body
或
h1
-面板1应该淡出，而面板2应该同时淡出

对于第二个面板，当我仅单击
h1
-面板2应淡出，而面板1应再次淡入。



现在，代码是：当我点击body时，它成功地带来了面板2，而在面板2中，当我点击
h1
时，它成功地将我带回面板1。
但是，当我在面板1上单击
h1
时，它会淡出，显示面板2一秒钟，然后再次淡入，不显示第二个面板。我该怎么办

$(function() {  
    $('body,h1').on('click',function (){
        $('div.panel-1').fadeOut(1000);
        $('div.panel-2').fadeIn(1000).removeClass('hide');
        return false;
        });
});


$(function() {
    $('h1').on('click',function (){
        $('div.panel-2').fadeOut(1000);
        $('div.panel-1').fadeIn(1000);
    });
});

您似乎将两个事件侦听器附加到H1中。您可能应该只附加一个侦听器来切换面板的可见性（检测哪个是可见的，并相应地切换）。在代码中，侦听器是按顺序调用的。另外，您删除了“hide”类，但没有将其添加回任何位置。
您似乎将两个事件侦听器附加到H1中。您可能应该只附加一个侦听器来切换面板的可见性（检测哪个是可见的，并相应地切换）。在代码中，侦听器是按顺序调用的。此外，您删除了“隐藏”类，但不将其添加回任何位置

$(function() {
    $('body').on('click',function (e){
        if ($('div.panel-1').is(':visible')  && e.target.tagName != 'h1'){
           $('div.panel-1').fadeOut(1000, function() {
               $('div.panel-2').fadeIn(1000).removeClass('hide');
               $(this).addClass('hide');
           });
        }
        return false;
    });

    $('h1').on('click',function (){
        if ($('div.panel-1').is(':visible')){
           $('div.panel-1').fadeOut(1000, function() {
               $('div.panel-2').fadeIn(1000).removeClass('hide');
               $(this).addClass('hide');
           });
        }else{
           $('div.panel-2').fadeOut(1000, function() {
               $('div.panel-1').fadeIn(1000).removeClass('hide');;
               $(this).addClass('hide');
           });
        }
        return false;
    });
});

这只是一个简单的想法，但这些东西往往会在多次点击或意外行为时出错：

$(function() {
    $('body, h1').on('click',function (){
        $('div.panel-1, div.panel-2').toggleClass('hide').fadeToggle(1000);
        return false;
    });
});

这只是一个简单的想法，但这些东西往往会在多次点击或意外行为时出错：

$(function() {
    $('body, h1').on('click',function (){
        $('div.panel-1, div.panel-2').toggleClass('hide').fadeToggle(1000);
        return false;
    });
});

您必须为单击事件使用

为了简单起见，请使用单个类：

$(function() {  
    $('body, h1').on('click',function(e){
      e.stopPropagation();
      $('.panel').fadeToggle();
    });
});

您必须为单击事件使用

为了简单起见，请使用单个类：

$(function() {  
    $('body, h1').on('click',function(e){
      e.stopPropagation();
      $('.panel').fadeToggle();
    });
});

这是最终版本，它是有效的。
让我们在html中有两个div，id分别为panel-1和panel-2。向panel-2添加一个.hide类（display:none；）。
如果有人想：单击body或h1时，面板1应淡出，面板2应同时淡入。
对于第二个面板，当仅单击h1时，面板2应淡出，面板1应再次淡入

$（函数（）{

}))
 这是最终版本，它很有效。
让我们在html中有两个div，id分别为panel-1和panel-2。向panel-2添加一个.hide类（display:none；）。
如果有人想：单击body或h1时，面板1应淡出，面板2应同时淡入。
对于第二个面板，当仅单击h1时，面板2应淡出，面板1应再次淡入

$（函数（）{

}))
 您已将多个操作绑定到单击h1。是的，我应该如何做才能获得正确的操作？这非常令人困惑。。。您的面板中也有
h1
元素？没有h1在任何面板中都不存在。您已将多个操作绑定到单击h1。是的，我应该怎么做才能得到正确的结果？这非常令人困惑。。。您的面板中也有
h1
元素？没有h1在任何面板中都不存在。您可以帮助我如何做到这一点吗？您可以帮助我如何做到这一点吗？这是可行的，但只有在第一次单击时，它的行为不正常，否则工作正常。在第一次单击时，它再次显示相同的面板。有什么需要吗？此外，我想在点击body时，h1->转到panel2，，，，在panel2中，当只点击h1->返回panel1时…你能帮我解决这个问题吗谢谢你这么多adeneo我做了。特别感谢，因为你的部分代码帮助我解决了这个问题。谢谢。你的快速，以前没有看到你的评论。很高兴你把它整理好了。记住接受最有帮助的答案，如果您认为它对未来的读者有针对性，并且您的代码与任何答案都非常不同，因此也应该发布在此处，请自己发布一个答案并接受它。嘿，这是有效的，但只有在第一次单击时，它才会出现错误，否则效果会很好。在第一次单击时，它再次显示相同的面板。有什么需要吗？此外，我希望当单击body时，h1--->转到panel2，，，，在panel2中，当只单击h1--->返回panel1时…你能帮我解决这个问题吗谢谢你这么多adeneo我做了。特别感谢，因为你的部分代码帮助我解决了这个问题。谢谢。你的快速，以前没有看到你的评论。很高兴你把它整理好了。记住要接受最有帮助的答案，如果你认为它对未来的读者来说是合适的，并且你的代码与任何答案都是如此不同，因此也应该发布在这里，那么你自己发布一个答案并接受它。但是我怎么能使用一个类呢？我有两个面板，而你的面板可以共享同一个类！看看这个演示：它们（.panel-1和.panel-2）都有.panel类，但是我如何使用单个类呢？我有两个panel，而您的两个panel可以共享同一个类！看看这个演示：它们（.panel-1和.panel-2）都有.panel类