jQuery 토글 애니메이션

Question

나는이 jquery를 가지고있다 :

$(document).ready(function()
{
   $("#panel").hide();

   $('.login').toggle(
   function()
   {
      $('#panel').animate({
      height: "150", 
      padding:"20px 0",
      backgroundColor:'#000000',
      opacity:.8
}, 500);
   },
   function()
   {
      $('#panel').animate({
      height: "0", 
      padding:"0px 0",
      opacity:.2
      }, 500);
   });
});

이것은 잘 작동하지만 기능을 약간 확장해야합니다. 또한 #Panel Div와 동기화하여 다른 DIV의 속성을 비슷하게 조작하고 싶습니다. 나는 2 차 div와 관련된 두 가지 함수를 추가하려고 시도했지만 4 단계 토글을 얻었습니다 ... 하하! 내 무지를 용서하십시오!

감사합니다!

Answer 1

$('.login').toggle(
    function(){
        $('#panel').animate({
            height: "150", 
            padding:"20px 0",
            backgroundColor:'#000000',
            opacity:.8
        }, 500);
        $('#otherdiv').animate({
            //otherdiv properties here
        }, 500);
    },
    function(){
        $('#panel').animate({
            height: "0", 
            padding:"0px 0",
            opacity:.2
        }, 500);     
        $('#otherdiv').animate({
            //otherdiv properties here
        }, 500);
});

Answer 2

토글 함수 내부에 이중 기능을 추가하면 등록 된 클릭 이벤트에 대해 작동한다고 생각하지 않습니다 (내가 뭔가 빠진 경우가 아니라면)

예를 들어:

$('.btnName').click(function() {
 top.$('#panel').toggle(function() {
   $(this).animate({ 
     // style change
   }, 500);
   },
   function() {
   $(this).animate({ 
     // style change back
   }, 500);
 });

Answer 3

onmouseover="$('.play-detail').stop().animate({'height': '84px'},'300');" 

onmouseout="$('.play-detail').stop().animate({'height': '44px'},'300');"

하나의 onmouseover와 하나는 onmouseout의 두 가지 정거장을 두십시오.