2011-11-28 2 views
2

jQuery의 fadeToggle() 함수를 사용하고 싶습니다.jQuery : fadeToggle() 사용법?

나는 숨겨진 div가 있고 링크를 클릭하면 fadeToggle()으로 전화를 걸고 div가 사라지고 다른 클릭이 사라집니다.

실마리는 내가 잘하고있는 자신의 기능으로 클릭 한 후 창 크기를 조정하려고한다는 것입니다. 순간

나는이 솔루션이 : 그것은 완벽하게 작동

jQuery: 
$("#myLink").live("click", function() { 
    $("#myDiv").toggleClass("myDivClass"); 
    Resize(); 
}); 

Css: 
<style type="text/css"> 
#myDivclass { 
display:none; 
} 
</style> 

을,하지만 난 fadeToggle() 대신 toggleClass()과 같은 일을하고 싶다.

문제는 두 번째 클릭 후 (div가 페이드 아웃 한 후) 창의 크기가 조정되지 않고 toggleClass으로 크기가 조정되지만 fadeToggle으로는 조정되지 않는 문제입니다.

답변

3

당신은 아마 fadeToggle 방법에 대한 콜백으로 Resize 기능을 제공해야합니다, 그래서 애니메이션이 완료되면 그것은 실행 :

$("#myLink").live("click", function() { 
    $("#myDiv").fadeToggle(1000, Resize); 
}); 

주 당신은 Resize 기능 당신 '에 인수를 전달해야하는 경우 당신은 확실히 jQuery를 당신의 최신 버전을 사용하고 live를 사용하지 않아야하는 경우, 다른 메모에서

$("#myLink").live("click", function() { 
    $("#myDiv").fadeToggle(1000, function() { 
     Resize(); 
    }); 
}); 

: 익명의 콜백을 사용해야 할 것이다. 대신 on을 사용하십시오 (이전 버전을 사용하는 경우 delegate은 여전히 ​​더 좋습니다).

+0

, 감사합니다! –

+0

문제 없습니다. 다행입니다. :) –

1

Resize이 호출 될 때까지 애니메이션이 완료되지 않았을 가능성이 있으므로 원하는 영향을받지 않도록 콜백 함수에 resize를 추가 할 수 있습니다.

당신이 fadeToggle 기능이 완료 될 때까지 기다릴 필요가 어쩌면 때문에
$("#myDiv").fadeToggle("fast", function() { 
    Resize(); 
}); 
0

,이 시도 :

그것 뿐이다
$("#myLink").live("click", function() { 
    $("#myDiv").fadeToggle('slow', function(){ 
    Resize(); 
    }); 
});