.animate() - Mô phỏng hàng đợi cho các phiên bản jquery cũ hơn (Drupal) Xung đột

Question

im tìm kiếm một giải pháp để đưa ra phiên bản jquery, mà Drupal bao gồm cả nguyên bản. Một phiên bản cũ của nó. Trên thực tế có vấn đề nooo - nhưng một: D tôi sử dụng một .animate() chức năng với một hàng đợi sai, và không có thuộc tính này (vì thuộc tính này là addet để .animate() trong jquery 1.7), nó không hoạt hình như tôi muốn.

Mã này là:

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

lẽ bạn có thể giúp tôi tìm một giải pháp? Vấn đề, tại sao tôi muốn loại trừ phiên bản jquery mà tôi đã sử dụng cho điều này (1.8.3) là một Mô-đun Drupal không hiển thị wysiwyg (CKEditor), khi jquery 1.8.3 được bổ sung thêm và tiếc là tôi không thể thay thế jquery phiên bản của lõi với jquery 1.8.3 :(

Answer 1

tôi đã luôn luôn thực hiện điều này thông qua js vani thường xuyên tuổi;.. bằng cách đơn giản bắn sự kiện trên chậm trễ/Thời gian chờ này chiến đấu với vấn đề hàng đợi

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>