.animate () - Modeling queues for old jquery Verions (Drupal) Conflict

Question

im looking for a solution to exit with the jquery version that Drupal includes initially. Its an older version. There are actually problems with nooo, but one thing: DI uses the .animate () function with a queue false, and without this attribute (since this attribute was added to .animate () in jquery 1.7), it does not liven up as I want.

The code:

//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 that I used for this (1.8.3), is that the Drupal module does not show wysiwyg (CKEditor) when jquery 1.8.3 is included in the add-on and, unfortunately, I cannot replace jquery kernel version with jQuery 1.8.3: (

Answer 1

I always did this through plain old vanilla js; just by triggering a delay / timeout event. This combats the queue problem.

Check it 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>