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做到这一点;通过简单地在延迟/超时时触发事件。这可以解决队列问题。

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版本（Drupal）冲突的队列模拟

1 个答案: