7

Drupalにネイティブに含まれているjqueryバージョンで解決策を探しています。その古いバージョンです。実際にはnoooの問題があります-しかし、1つの:DIはキューfalseで.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) を除外したい理由は、jquery 1.8.3 が追加で含まれている場合、Drupal モジュールが wysiwyg (CKEditor) を表示しないことです。残念ながら、jquery を置き換えることはできません。 jquery 1.8.3を使用したコアのバージョン:(

4

1 に答える 1

2

私はいつもこれを通常の古いバニラ js で行ってきました。遅延/タイムアウト時にイベントを発生させるだけです。これにより、キューの問題が解決されます。

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>
于 2012-11-25T22:47:44.513 に答える