.animate() - Queue Simulation for older jquery Verions (Drupal) Conflict

Question

im searching for a solution to come out with the jquery Version, which Drupal is including natively. Its a older version. Actually there are nooo problems - but one :D I use a .animate() function with a queue false, and without this attribute (because this attribute was addet to .animate() in jquery 1.7), it is not animating as i want.

The code is:

//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'})
});

Maybe you can help me find a solution? The problem, why i want to exclude the jquery version I used for this (1.8.3) is that a Drupal Module is not showing up the wysiwyg (CKEditor), when jquery 1.8.3 is inlcluded additionaly and unfortunately i cant replace the jquery version of the core with jquery 1.8.3 :(

Answer 1

I have always done this via regular-old vanilla js; by simply firing the event on delay/timeout. This combats the queue problem.

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>