jQuery: как использовать fadeToggle ()?

Question

Я хочу использовать функцию fadeToggle() в jQuery.

У меня есть скрытый div, и когда я нажимаю на ссылку, я хочу вызвать fadeToggle(), когда div исчезает, а после другого щелчка исчезаетout.

Подсказка в том, что я хочу изменить размер окна после нажатия моей собственной функцией (которая работает хорошо).

На данный момент у меня есть это решение:

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

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

Работает отлично, но я хочу сделать то же самое с fadeToggle() вместо toggleClass().

Проблема в том, что после второго щелчка (после того, как div исчезает)размер окна не изменяется - он изменяется с toggleClass, но не с fadeToggle.

Answer 1

Возможно, вам необходимо предоставить функцию Resize в качестве обратного вызова для метода fadeToggle, поэтому он запускается после завершения анимации:

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

Обратите внимание, что если вам нужно передать аргументы в функцию Resize, вам придется использовать анонимный обратный вызов:

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

С другой стороны, если вы используете последнюю версию jQuery, вам определенно не следует использовать live. Вместо этого используйте on (а если вы используете более старую версию, delegate еще лучше).

Answer 2

Вы можете попробовать добавить изменение размера к функции обратного вызова, возможно, анимация не завершится к моменту вызова Resize, поэтому вы не получите нужного эффекта.

$("#myDiv").fadeToggle("fast", function () {
   Resize();
});

Answer 3

Может быть, потому что вам нужно дождаться завершения функции fadeToggle, попробуйте это:

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