我有一個簡單的網頁，其頂部有一個主要的h1，底部有兩個面板。 panel 1 is visible and panel 2 has class .hide。
我想要做的是：
當我點擊body或h1 - 面板1應該淡出和面板2應在同一時間褪色英寸
而對於第二面板當我點擊只在h1 - 面板2應該淡出面板1應該再次消失英寸

現在代碼：當我點擊的身體帶來面板2成功，並在面板2當我點擊h1它把我帶回到面板1成功。但是，當我點擊h1面板1，它淡出，顯示面板2用於第二和然後再次淡入和不顯示第二面板上。我該怎麼辦？jquery淡入淡出並切換

$(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); 
    }); 
});

2012-03-04 zahid ali

您已綁定多個操作來點擊h1。 – j08691 2012-03-04 21:54:39

是的，我該如何做正確的事情？ – 2012-03-04 21:56:47

這很混亂......你的面板裏面還有'h1'元素？ – 2012-03-04 22:01:55

您似乎將兩個事件偵聽器附加到H1中。您應該只附加一個用於切換面板可見性的偵聽器（檢測哪些是可見的並相應切換）。在你的代碼中，監聽器被順序地調用。此外，你刪除他「隱藏」類，但你不加回它的任何地方。

來源

2012-03-04 22:00:27 Lycha

你能幫我解決問題嗎？ – 2012-03-04 22:14:30

$(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; 
    }); 
});

來源

2012-03-04 22:02:03 adeneo

嘿，這工作，但只有在第一次點擊它錯誤行爲，否則工作正常。在第一次點擊，它再次顯示相同panel.Anything爲了那個原因？ – 2012-03-04 22:23:55

此外，我希望當點擊身體時，h1 --->去面板2 ,,,,在面板2上點擊時只有h1 --->回到面板1 .....你能幫我解決這個問題嗎一個 – 2012-03-04 22:27:59

非常感謝你adeneo我做到了。特別感謝，因爲你的部分代碼幫助我解決了這個問題。謝謝。 – 2012-03-04 22:34:41

demo jsBin

，你必須使用event.stopPropagation()對於單擊事件
並且爲了簡單起見使用單個類：

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

來源

2012-03-04 22:10:18

但我怎樣才能使用一個班級？我有兩個面板 – 2012-03-04 22:24:32

您的面板可以共享一個班級！看看這個演示：http://jsbin.com/ojujup/3/edit他們都（.panel-1和.panel-2）有.panel CLASS – 2012-03-04 22:48:56

所以這裏是最終版本，它的工作原理。讓我們在html中使用兩個div，id爲panel-1和panel-2。向panel-2添加一類.hide（display：none;）。如果有人想要：單擊主體或h1 - 面板1時應淡出，面板2應同時淡入。而對於僅在h1上單擊的第二個面板 - 面板2應該淡出並且面板1應該再次淡入。

$（函數（）{

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

    else if ($('div.panel-1').hasClass('hide')) { 
    $('div.panel-2').addClass('hide').fadeOut(400,function() { 
    $('div.panel-1').fadeIn(400).removeClass('hide'); 
    }); 
    return false; 
    } 

    }); 

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

}）;

來源

2012-04-03 11:49:42

jquery淡入淡出並切換

回答

demo jsBin

相關問題