jquery爆炸效果不能正常工作

Question

這裏我使用div和jquery創建導航菜單。我在這裏嘗試了一些東西，但沒有得到我想要的結果。當我點擊一個鏈接時，你會看到一個小提琴這兩個滾動條（x & y）會出現（我不想那樣），並且我沒有正確地獲得jquery爆炸效果。它從左側滑動。如何正確實現jquery爆炸效果？並且我爲jquery爆炸效果做了非常冗長的代碼是否正確？

You can see my codes in JSFIDDLE. I tried this. But didn't get the result what exactly I want.

$(document).ready(function() { 

     $("#showhome").click(function(){ 
     $("#firstdiv").show("explode", 
        {pieces: 8 }, 600); 
     }); 
     $("#showhome").on('click', function() { 
         $("#seconddiv, #thirddiv, #fourthdiv, #fifthdiv, #sixthdiv").hide(); 
       }); 
}); 

這是代碼我使用jQuery的爆炸效果。你可以在jsfiddle中看到剩餘的jquery，html，css代碼..

Answer 1

你有2個功能做同樣的事情。

$("#showhome").click(); 

和

$("#showhome").on('click', handler); 

.click()僅僅是.on('click', handler)一個快捷方式。

http://api.jquery.com/click/

你可以加在一起他們像這樣：

$("#showhome").click(function() { 
    $("#firstdiv").show("explode", { 
     pieces: 8 
    }, 600); 
    $("#seconddiv, #thirddiv, #fourthdiv, #fifthdiv, #sixthdiv").hide(); 
}); 

Answer 2

你必須使用切換這樣的：

$(document).ready(function() { 

     $("#showhome").click(function(){ 
     $("#firstdiv").toggle("explode", 
        {pieces: 8 }, 600); 
     }); 
    });