.animate() - 旧 jquery 版本（Drupal）冲突的队列模拟答案

【问题标题】：.animate() - Queue Simulation for older jquery Verions (Drupal) Conflict.animate() - 旧 jquery 版本（Drupal）冲突的队列模拟
【发布时间】：2012-11-09 13:02:21
【问题描述】：

我正在寻找一个解决方案来推出 jquery 版本，Drupal 原生包含该版本。它是一个旧版本。实际上没有问题-但是一个：DI使用带有队列假的.animate（）函数，并且没有此属性（因为此属性在jquery 1.7中添加到.animate（）中），它不是我想要的动画。

代码是：

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

也许你能帮我找到解决办法？问题，为什么我要排除我用于此的 jquery 版本（1.8.3）是 Drupal 模块没有显示所见即所得（CKEditor），当 jquery 1.8.3 被额外包含时，不幸的是我不能替换 jquery带有 jquery 1.8.3 的核心版本 :(

【问题讨论】：

你见过jQuery Multi吗？它可以让您将不同的 jQuery 版本加载到同一个页面中而不会发生冲突

标签： jquery drupal module jquery-animate queue

【解决方案1】：

我总是通过普通的老式香草 js 来做到这一点；通过简单地触发延迟/超时事件。这解决了队列问题。

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>

【讨论】：