jquery 폭발 효과가 제대로 작동하지 않습니다.

Question

div 및 jquery를 사용하여 nav 메뉴를 만듭니다. 여기에 몇 가지 시도했지만 결과가 정확히 내가 원하는 것을 얻지 못했습니다. 당신은 두 개의 스크롤바 (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

동일한 기능을하는 두 가지 기능이 있습니다.

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

.click()

$("#showhome").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); 
     }); 
    });