Jquery toggle animation 클릭시

Question

클릭하면 div가 확장되고 다른 클릭하면 다시 축소됩니다. 이 함수를 호출하면 아무 일도 일어나지 않습니다.

jQuery를 코드 :

$(".panel").toggle(function() 
{ 
    $(this).click(function() 
    { 
     $(this).animate({width:'300px',height:'300px'}, 200); 
    }); 
}, 
function() 
{ 
    $(this).click(function() 
    { 
     $(this).animate({width:'152px',height:'152px'}, 200); 
    }); 
}); 

Answer 1

토글()는 가죽 및 표시 div와 두 개의 함수를 매개 변수로 사용하지 않습니다. http://api.jquery.com/toggle/

이것이 최선의 방법인지 잘 모르겠지만 여기에 내 해결책이 있습니다. 누군가가 개선점을 지적하기를 바랍니다.

var next_move = "expand"; 
$(document).ready(function(){ 
$(".panel").click(function() 
{ 
    var css = {}; 
    if (next_move == "expand"){ 
     css = { 
      width: '300px', 
      height: '300px' 
     }; 
     next_move = "shrink"; 
    } else { 
     css = { 
      width: '152px', 
      height: '152px' 
     };  
     next_move = "expand"; 
    } 
    $(this).animate(css, 200); 
}); 
}); 

http://jsfiddle.net/Vc49G/

즐기십시오!

Answer 2

click()이 neccesary 내부 토글 기능이 아닌,이 시도 : 그런데

$(".panel").toggle(
function() 
{ 
    $(this).animate({width:'300px',height:'300px'}, 200); 
}, 
function() 
{ 
    $(this).animate({width:'152px',height:'152px'}, 200); 
} 
); 

, this method was deprecated in jquery 1.8