.animate（） - 较旧的jquery Verions（Drupal）冲突的队列模拟 [英] .animate() - Queue Simulation for older jquery Verions (Drupal) Conflict

问题描述

我正在搜索一个解决方案来出现与jquery版本，Drupal包括在本机。它的旧版本。实际上有nooo问题 - 但是一个：DI使用一个.animate（）函数和一个队列false，没有这个属性（因为这个属性在jquery 1.7中被添加到.animate（）），所以它不是我想要的动画。

代码是：

  //当鼠标滚过
 $（＃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'}）
}）; 
 
 //当鼠标被移除时
 $（＃login）bind（'mouseout mouseleave'，function（）{
 $（＃logo （）。animate（{top：'6px'}，{queue：false，duration：600，easing：'easeOutBounce'}）
 
 $（＃login）stop（） （{top：'40px'}，{queue：false，duration：600，easing：'swing'}）
}）; 
  

也许你可以帮我找到一个解决方案？这个问题，为什么我想排除我用于这个（1.8.3）的jquery版本是一个Drupal模块没有显示wysiwyg（CKEditor），当jquery 1.8.3被包含在附加的，不幸的是我不能替换jquery版本的核心与jquery 1.8.3：（

解决方案

我一直这样通过常规的香草js;简单地在延迟/超时触发事件，这样可以抵抗队列问题。

在JsFiddle上查看这个。

 < style type =text / css> 
 .redBlock {
 height：2em; 
背景颜色：红色; 
颜色：白色; 
边框：2像素纯银; 
} 
< / style> 
< input type =buttonid =testFoovalue =点击我一堆次超快/> 
< div id =testBarstyle =width：100px;class =redBlock> Red Block< / div> 
< script type =text / javascript> 
 $（document）.ready（function（）{
 $（＃testFoo）。click（function（）{
 fireOneAnimateEvent（）; 
}）; 
}）; 
函数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> 
  

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 :(

解决方案

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>

这篇关于.animate（） - 较旧的jquery Verions（Drupal）冲突的队列模拟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！