클릭 한 번; Divs가 반대 방향으로 열림

Question

JQuery에서이 효과를 얻을 수있는 방법이 있는지 궁금합니다. stackoverflow 사용자가 최근에 내가 가고있는 효과를 달성하는 데 도움; 이제 JQuery를 사용하여 가능한 가장 효율적인 방법으로 수행하려고합니다. 여기에 내가 달성하기 위해 찾고있는 무슨의 더 나은 설명은 바이올린에 대한 링크는 다음과 같습니다

http://jsfiddle.net/itsbc/U3Lg9/11/

현재 버전은 약간 고르지 실행됩니다. 나는 이와 같은 좀 더 부드러운 무언가를 찾고 있어요 :

http://jsfiddle.net/itsbc/QchfJ/

사전에 감사, 기원전. 코멘트 섹션에서 제안 기타로

Answer 1

, 당신은

.. 당신은 .. 그냥 애니메이션을 밀어 경우 .. 당신은 단순히 당신이 무엇에 충실해야 성능 측면에서 자녀로 더 낫다 그러나 무엇을 진짜로 원하는 것은 slideDown animation + hide effect입니다.

#hider1 { 
    position:fixed; /* Changed style*/ 
    top: 0px;  
    background: black; 
    width:100%; 
    height:48%; 
    min-height:0px; 
    text-align:center; 
    color:white; 
} 

#hider2 { 
    background-color:black; 
    width:100%; 
    height:50%; 
    text-align:center; 
    position:fixed; /* Changed style*/ 
    bottom:0;  /* Changed style*/ 
    color:white; 
} 

JS :

$(function() { 
    $('#test').on('click', function() { 
     $('#hider1').animate({    
      height: 0, 
      opacity: 0.2 //<-- Fancy stuff 
     },1000); 

     $('#hider2').animate({    
      height: 0, 
      opacity: 0.2 //<-- Fancy stuff 
     },1000); 

    }); 
}); 

보통 slideDown 애니메이션이 작업을 얻기 위해 약간의 트릭을 할 필요가 있으므로, 아래를 참조하십시오 .. .. 요소를 보여

CSS 것입니다

DEMO -> FF 및 Chrome에서 확인되었습니다.

Answer 2

jQuery를 사용하지 않으면 이미 사용하는 것보다 훨씬 더 효율적일 수 있습니다.

실제로 애니메이션을 변경하려는 이유 (예 : 애니메이션의 속도 또는 여유 등)가 애니메이션을 제어하는 ​​데 더 중요한 이유 일 수 있습니다.

http://jsfiddle.net/U3Lg9/13/

Answer 3

이 좋아, 그래서 기존의 코드를 가져다가 그것을 조금 리팩토링 : 이런 경우,이 시도. jQuery 호출은 이와 같이 간단합니다.

$("#opener").click(function() { 
    myApp.websiteOpener.displayWebsite('hider1', 'hider2'); 
}); 

그런 다음 필요한 코드가 들어있는 별도의 파일이 있습니다.

var myApp = {}; 
myApp.websiteOpener = { 

    up: null, 
    down: null, 
    topPanel: null, 
    bottomPanel: null, 

    displayWebsite: function(tPanel, bPanel) { 
     if (typeof up !== "undefined") return; 
     topPanel = tPanel; 
     bottomPanel = bPanel; 
     up = setInterval(this.goUp, 2); 
     down = setInterval(this.goDown, 2); 
    }, 

    goUp: function(x) { 
     var h1 = document.getElementById(this.topPanel); 
     if (h1.offsetHeight <= 0) { 
      clearInterval(up); 
      return; 
     } 
     h1.style.height = parseInt(h1.style.height) - 1 + "%"; 
    }, 

    goDown: function(x) { 
     var h2 = document.getElementById(this.bottomPanel); 
     if (h2.offsetHeight <= 0) { 
      clearInterval(down); 
      return; 
     } 
     h2.style.top = parseInt(h2.style.top) + 1 + "%"; 
     h2.style.height = parseInt(h2.style.height) - 1 + "%"; 
    } 
};​ 

Try it for yourself