我正在製作一個div的孩子的動畫，孩子們在懸停時一次製作一個動畫，而另一個正在停止，有時也被刪除。我想要的是當所有動畫停止/停止/或不再移動時的回調 - 換句話說。jquery隊列給父母而不是特定的孩子？

...我試圖讓這樣的事情，直接排隊的家長，但是這似乎並沒有在所有的工作：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script> 
     <script type="text/javascript" > 
      $(document).ready(function(){ 

       $('div.start').click(function(){ 

        $('<img style="display:block;display:none;" src="http://www.laserpros.com/images/site/HP_Circle_Logo_Vector1_small.jpg">') 
        .appendTo($(this)) 
        .animate({opacity:0},0) 
        .css('display','block') 
        .animate({opacity:1},2000,function(){}); 

        $(this).queue(function(){ 
         $('#gotcha').html(1+parseInt($('#gotcha').html())); 
        }); 

       });   
      }); 
      </script> 
     <style> 
      div.start{ 
       background-color:#0057D8; 
       width:100px; 
       float:left; 
      } 
      div#gotcha{ 
       float:left; 
       width:100px; 
      } 
     </style> 
    </head> 
    <body> 
     <div></div> 
     <div class="start">Start</div> 
     <div id="gotcha"> 
      0 
     </div> 
    </body> 
</html>

的數量suppossed換一次動畫完成，但這絕不會發生。有沒有其他方法可以做？或者也許以某種方式獲得fx的剩餘時間，並且使用setTimeout？

任何意見表示讚賞。

編輯：我爲什麼要這樣做？

實際上，我有一系列的小拇指圖像，並將它們懸停後，他們在dom中創建了更大的對應物，並將其附加到展示div上。附加的圖像相互疊加，以實現平滑的過渡效果，最新的圖像加載正在動畫，同時也阻止其他兄弟從動畫。取消停留時，我想要在所有動畫停止放大以恢復到原始圖片時創建超時。我嘗試使用.children（'img：last'）。queue（function（）{}）將縮放效果排隊到最新的子節點，但是因爲它們是異步載入load事件，它們的順序不清晰，而且一旦動畫完成，並且如果我們不快速取消快速移動，則需要不透明度1，並從父項中移除其他同胞。所以我們很難猜測我們應該把隊列綁定到什麼孩子身上。

編輯2：現在我修改我的代碼一點點，我只在img連接到div一旦其加載，所以最後加載始終可用與IMG：最後的選擇，但直覺告訴我，這個也沒有被保護以防止錯誤。

現在，我想最好是做這樣的事情：

獲取isAnimated所有兒童。
如果動畫 - 獲取持續時間和設置超時事件。
如果否 - 直接執行事件。

雖然問題是我不知道如何獲得動畫的剩餘時間。如果你就此提出一些建議，這將大有幫助。謝謝

來源

2012-05-12 Anonymous

是一個笑話，mkk？ – Anonymous

我試圖做的事情是根本不可能的，因爲它似乎。

爲提出的問題的解決方案是以下幾點：

對於孩子的動畫化妝步驟，並完成它需要設定時間。

然後把這個變量，並設置超時，所以它會在動畫後執行。

任何孩子都可以寫入該變量也是可能的，所以我們不需要搜索它們。

最後，它完美地完成了我的任務。

來源

2012-06-11 18:47:50 Anonymous

我不確定我是否正確理解了這個問題，但似乎每次用戶點擊「開始」時，圖像都應該出現並且數量會增加！如果是這樣的：

看到這個小提琴working example!

JQUERY

$('div.start').click(function(){ 
    var $me = $(this), 
     src = 'http://www.laserpros.com/images/site/HP_Circle_Logo_Vector1_small.jpg'; 

    $('<img style="display:block;display:none;" src="'+src+'">') 
    .appendTo($me) 
    .css({"display":"block", "opacity":0}) 
    .animate({opacity:1},2000,function(){ 
     $('#gotcha').html(1+parseInt($('#gotcha').html())); 
    }); 
});

CSS

div.start { 
    background-color:#0057D8; 
    width:100px; 
    float:left; 
} 
div#gotcha { 
    float:left; 
    width:100px; 
}

HTML

<div></div> 
<div class="start">Start</div> 
<div id="gotcha">0</div>

編輯

編輯爲要求的意見是什麼，當排隊的動畫是空只更新#gotcha。

看到新Fiddle example!

HTML

<div class="start">Start</div> 
<div id="gotcha">0</div>

JQUERY

// Jquery Object and image SRC 
var $me = $('div.start'), 
    src = 'http://www.laserpros.com/images/site/HP_Circle_Logo_Vector1_small.jpg'; 

// On click over "start" 
$me.on("click", function(){ 
    $('<img style="display:block;display:none;" src="'+src+'">') 
     .appendTo($me)        // append img to div 
     .css({"display":"block", "opacity":0})  // hide img 
     .animate({opacity:1},2000, function() {  // animate 
      if ($me.queue('fx').length==0) {   // if queue is empty 
       $('#gotcha').html("1");    // update #gotcha to 1 
      } 
     }); 
});

CSS

div.start { 
    background-color:#0057D8; 
    width:100px; 
    float:left; 
} 
div#gotcha { 
    float:left; 
    width:100px; 
}

來源

2012-05-12 21:18:00 Zuul

aww，對不起，你弄錯了，我承認我做了一個例子並不精確。這只是爲了證明我們不能像這樣排隊等待父母。這個數字只有在所有活動停止後纔會增加......並且與此無關 – Anonymous

** ok！沒問題。**我只需要更好地理解你的目標。用戶點擊「開始」，動畫被執行並且數量增加！這部分如果在我發佈的示例上完成。但是你說「所有的活動都已經停止」了！你能詳細說明嗎？ – Zuul

好吧，請注意，我們可以點擊10次，100次，並繼續點擊更多 - 並且它們會彈出更多。然而，只有最後一次加註纔會觸發回調。我的問題實際上編輯了一些具體的細節。現在我已經做出了讓回調隊列排隊到最後一個加載的孩子，同時清除其他舊的回調。但我仍然希望我們能夠在不依賴隊列給特定孩子的情況下進行回調，特別是如果它出於某種原因被竊聽 - 誰知道。 – Anonymous

由於動畫的時間是不變的，結果只是在適當的時候捕捉它的問題，所以我決定使用一般變量，因此在開始動畫之前，我將變量設置爲動畫長度。

例如。

time=400;

然後我用這個定時器製作動畫。後來我可以添加動畫步驟功能，以確定更精確的數字...

來源

2012-05-13 19:24:17 Anonymous

從我收集的內容中可以看出，對於給定的元素集合，完成所有動畫後，您正在嘗試運行回調。在這種情況下，父元素的子元素：

$(parentElement).children().promise().done(function() { 
    alert("Animation complete!"); 
}

來源

2012-11-04 02:40:02

jquery隊列給父母而不是特定的孩子？

回答

編輯

相關問題