在用戶激活的動畫期間暫停所有背景動畫（jquery）

所以我有幾組動畫在後臺進行。但是，在用戶動畫期間，我想暫停所有其他動畫，以便瀏覽器呈現用戶最需要的內容。在用戶激活的動畫期間暫停所有背景動畫（jquery）

Element.mousein() --> Pause (NOT STOP) all animations except those related to Element 
         i.e. $(body).not(Element).pauseAnimations(); 
Element.mouseout() --> Resume all animations 
         i.e. $(body).not(Element).resumeAnimations();

像這樣的事情http://tobia.github.com/Pause/而是暫停所有其他的人不同之處在於徘徊的人。

來源

2013-01-07 bluejamesbond

'問題僞碼「ish'代碼只是浪費別人的時間（包括你）顯示，如果你想堅實的答案動畫是如何工作的 – charlietfl

是的，我更新的問題。 – bluejamesbond

使用停止的問題（），你必須指定每一個動畫手冊，但我只是發現this (link)這顯然允許終止所有目前的動畫。

$("button").click($.fx.off)

如你所說，這是一個普遍選擇好了上面的解決方案是沒有任何好處的。

$("div:animated").not('#AnimationYouWantToContiune').stop();

請參閱本fiddle香港專業教育學院設法加3周的div被動畫和點擊一個按鈕時，將停止所有，但指定的div從動畫。這有幫助嗎？

來源

2013-01-07 23:42:44 dev

但是這會停止所有的動畫而不是所有其他的動畫 – bluejamesbond

但是你可以用'.not添加一個異常（）'選擇器像'$（「button」）。click（$。fx.off）.not（t他）' – dev

$。fx.off是一個全局jQuery變量，禁用所有的動畫。不是每個可以打開和關閉的元素變量。糾正我，如果我錯了。 – bluejamesbond

您可以使用函數來延遲隊列中項目的執行，但這不是執行此操作的優先方式。

如果可以的話，你應該在animate()方法使用回調函數。

來源

2013-01-07 23:40:24 intelis

您可以使用stop()當你需要它來停止動畫。

來源

2013-01-07 23:41:47 greener

這意味着你必須去每個動畫和說停止...但相反，我想推廣到像這樣$（body）.not（this）.pauseAnimations（）; – bluejamesbond

爲什麼不使用http://api.jquery.com/animated-selector/？ – greener

你可以爲這些元素指定一個類並選擇它們，你不需要去遍歷每個元素。 – zero7

這是很難使用的用戶，因爲他/她應該遵循移動框保持徘徊。但是定位以外的動畫當然會更有用。

不管怎麼說，這是官方暫停插件demo on jsFiddle的修改版本。

你應該在setupBox()函數內部做的是：

function setupBox(i) { 
    var $box = $('#box' + i); 

    function phase1() { 
     $box.animate({left: 100}, 1000, 'swing', phase2); 
    } 

    function phase2() { 
     $box.animate({left: 0}, 1000, 'swing', phase1); 
    } 

    // This pauses rest of the boxes except the targeted. 
    // I added a class ('box') to each element to easily select all boxes. 
    // You could also do: $('.demo').children() since all the children are boxes. 
    function pauseRest() { 
     $('.box').not('#box' + i).pause(); 
     $box.resume(); 
    } 

    $box.hover(function() { 
     pauseRest($box); 
    }, function() { 
     $('.box').resume(); 
    }); 
    phase1(); 
}

來源

2013-01-24 12:17:49

使用jQuery像你擁有它......

jQuery有選擇：沒有描述here

這是一個〔實施例暫停插件與暫停其他元素，而不是一個hoverd;

<html> 
    <head> 
     <link rel='stylesheet' href='http://tobia.github.com/Pause/style.css'> 
     <script src='http://tobia.github.com/Pause/jquery-1.4.2.min.js'></script> 
     <script src='http://github.com/tobia/Pause/raw/master/jquery.pause.min.js'></script> 
    </head> 
    <body> 
     <div class="demo"> 
      <div id="box1" class="boxy"></div> 
      <div id="box2" class="boxy"></div> 
      <div id="box3" class="boxy"></div> 
     </div> 
     <script type="text/javascript"> 
      $(function() { 
       $(".boxy").each(function(){ 
        $(this).hover(function() { 
         var id = $(this).attr("id"); 
         $(":not(#" + id + ")").pause(); 
        }, function() { 
         var id = $(this).attr("id"); 
         $(":not(#" + id + ")").resume(); 
        }); 
        setupBox($(this)); 
       }); 
       function setupBox(elem) { 
        function phase1() { 
         elem.animate({ left: 450 }, 2000, 'swing', phase2); 
        } 
        function phase2() { 
         elem.animate({ left: 0 }, 2000, 'swing', phase1); 
        } 
        phase1(); 
       } 
      }); 
     </script> 
    </body> 
</html>

來源

2013-01-25 10:54:16 Terafor

在用戶激活的動畫期間暫停所有背景動畫（jquery）

回答

相關問題