Включение функции jquery aimate

Question

Когда функция анимации уменьшит высоту & Ширина div, то любая другая функция может работать параллельно. предположим, что я хочу размыть свой div до его высоты. & ширина становится 0 ноль. В принципе, я хочу, чтобы когда высота моего div & уменьшилась на 50%, тогда я хочу сделать это размытым. Является ли это возможным?

animate имеет обратный вызов, но обратный вызов будет вызываться, когда анимация завершена..что я не хочу. здесь образец мой одушевленные код

$('#my-id').animate({width: 0, height: 0}, 1000); 

, если это возможно, то пожалуйста скажите мне решение с примерами кода. спасибо

Answer 1

Вы можете передать step function в animate(), и она будет называться для каждый шаг в анимации. В этой функции вы можете установить непрозрачность элемента соответствующим образом, как только его высота достигает половины своего первоначального значения:

$("#my-id").animate({ 
    width: 0, 
    height: 0 
}, { 
    duration: 1000, 
    step: function(now, fx) { 
     if (fx.prop == "height") { 
      var threshold = fx.start/2; 
      if (now < threshold) { 
       $(fx.elem).css("opacity", now/threshold); 
      } 
     } 
    } 
}); 

Это должно вести себя, как вы ожидаете, и запустить эти два эффекта параллельно. Попутно отметим, что получающаяся затухающая анимация будет более жидкой, если элемент выше ее ширины. Если ваш элемент шире, чем высок, вы можете отслеживать его свойство width, а не его height.

Answer 2

Анимируйте свои параметры на 50%, затем сделайте fadeOut, а затем продолжите анимацию (но на самом деле последняя анимация мне не нужна вообще, потому что она уже невидима).

$('#my-id').animate({width: 50, height: 50}, 1000, function() { 
    $(this).fadeOut('fast', function() { 
     $(this).animate({width: 0, height: 0}, 1000); 
    }); 
}); 

или без последней анимации:

$('#my-id').animate({width: 50, height: 50}, 1000, function() { 
    $(this).fadeOut('fast', function() { 
     $(this).css({width: 0, height: 0}); 
    }); 
}); 

Answer 3

Вы можете запустить 2 анимации один за другим:

$('#my-id').animate({width: 50%, height: 50%}, 1000).fadeOut("slow");