.animate() - 较旧的jquery Verions(Drupal)冲突的队列模拟

Question

我正在寻找一个解决方案来推出jquery版本,Drupal本身也包括在内.它的版本较旧.实际上没有问题 - 但是一个:DI使用.animate()函数,队列为false,没有这个属性(因为这个属性是jquery 1.7中的.animate()addet),它不是我想要的动画.

代码是:

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

也许你可以帮我找到解决方案？问题,为什么我要排除我用于此(1.8.3)的jquery版本是一个Drupal模块没有显示wysiwyg(CKEditor),当jquery 1.8.3被包含在另外,并且不幸的是我无法替换jquery jquery 1.8.3的核心版本:(

Answer 1

我总是通过常规的旧版 js 来完成此操作；只需在延迟/超时时触发事件即可。这解决了队列问题。

\n\n

在 JsFiddle 上检查一下。

\n\n

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

\n