.animate() - Simulazione coda per il più vecchio conflitto jquery Verions (Drupal)

Question

sto cercando una soluzione per uscire con la versione jquery, che Drupal include in modo nativo. È una versione precedente. In realtà non ci sono problemi - ma uno: D uso una funzione .animate() con una coda false, e senza questo attributo (perché questo attributo è stato aggiunto a .animate() in jquery 1.7), non si anima come voglio.

Il codice è:

//When mouse rolls over 
$("#login").bind('mouseover mouseenter',function(){ 
$("#logo").stop().delay(500).animate({top:'-44px'},{queue:false, duration:600, easing: 'swing'}) 

$("#login").stop().animate({top:'89px'},{queue:false, duration:600, easing: 'easeOutBounce'}) 
}); 

//When mouse is removed 
$("#login").bind('mouseout mouseleave',function(){ 
$("#logo").stop().animate({top:'6px'},{queue:false, duration:600, easing: 'easeOutBounce'}) 

$("#login").stop().animate({top:'40px'},{queue:false, duration:600, easing: 'swing'}) 
}); 

Forse puoi aiutarmi a trovare una soluzione? Il problema, perché voglio escludere la versione jquery che ho usato per questo (1.8.3) è che un modulo Drupal non mostra il wysiwyg (CKEditor), quando jquery 1.8.3 è incluso e purtroppo non posso sostituire il jquery versione del nucleo con jQuery 1.8.3 :(

Answer 1

ho sempre fatto questo tramite regular-vecchi js vaniglia;.. semplicemente sparando l'evento sul ritardo/timeout questo contrasta il problema della coda

Check this out on JsFiddle.

<style type="text/css"> 
.redBlock{ 
    height:2em; 
    background-color:red; 
    color:white; 
    border:2px solid silver; 
}​ 
</style> 
<input type="button" id="testFoo" value="click me a bunch of times super fast" /> 
<div id="testBar" style="width:100px;" class="redBlock"> Red Block </div>​ 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#testFoo").click(function(){ 
      fireOneAnimateEvent(); 
     }); 
    }); 
    function animateRedBlock() { 
     $("#testBar").css('width', '100px') 
      .animate({ 
       width: ($("#testBar").width() * 3) + "px" 
      }, 500, function() { }); 
    } 
    var delay = (function() { 
     var timer = 0; 
     return function (callback, ms) { 
      clearTimeout(timer); 
      timer = setTimeout(callback, ms); 
     }; 
    })(); 
    function fireOneAnimateEvent() { 
     delay(function() { 
      animateRedBlock(); 
     }, 500); 
    }​ 
</script>