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

Posted 2023-05-08

【中文标题】.animate() - 旧 jquery 版本（Drupal）冲突的队列模拟

【英文标题】：.animate() - Queue Simulation for older jquery Verions (Drupal) Conflict

【发布时间】：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 版本加载到同一个页面中而不会发生冲突

【参考方案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>