jQuery隊列的父母，而不是特定的孩子？
[英]jquery queue to parent rather than specific children?
問題描述
我正在為div的子項制作一些動畫，這些子項一次懸停地設置一個動畫，而另一個則停止，有時也被刪除。 我想要的是所有動畫停止/停止/或不再移動時的回調-換句話說。
...我試圖做這樣的事情，直接排隊給父母，但這似乎根本不起作用：
<!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>
動畫完成后，該數字可能會更改，但這從未發生。 我還有其他方法可以做嗎？ 還是以某種方式獲得fx的剩余時間，並使用setTimeout？
任何建議表示贊賞。
編輯 ：我為什么要這樣做？
實際上，我有一系列小拇指圖像，將它們懸停時，它們會在dom中創建較大的對應圖像，並在加載時將其自身附加到展示區div。 附加的圖像相互堆疊，以實現平滑的過渡效果，對最新加載的圖像進行動畫處理，同時還阻止其他同級對象進行動畫處理。 懸停時，一旦所有動畫停止縮放回原始圖片，我想創建一個超時。 我嘗試使用.children（'img：last'）。queue（function（）{}）將縮放效果排隊到最新子級，但是由於它們是與load事件異步加載的，因此其順序不清楚，而且一次動畫就完成了，如果我們不快速進行懸停，它的不透明度為1，並且也會從父級中移除其他同級對象。 因此，很難猜測我們將隊列綁定到哪些孩子上。
編輯2 ：現在我稍微修改了我的代碼，並且僅在加載div時將img附加到div上，因此最后一次加載始終與img：last選擇器一起使用，但是有些告訴我這也不受錯誤保護。
現在我想最好是做這樣的事情：
- 為所有孩子獲取isAnimated。
- 如果已設置動畫-獲取持續時間並設置超時事件。
- 如果否-直接執行事件。
但是問題是我不知道如何獲得動畫的剩余時間。 如果您對此提供一些建議，將大有幫助。 謝謝
4 個解決方案
解決方案1
0 2012-05-12 21:18:00
我不確定我是否正確理解了這個問題，但是似乎每當用戶單擊“開始”時，圖像就會出現並且數量會增加！ 如果是這樣的話：
請參閱此Fiddle 工作示例！
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示例！
的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;
}
解決方案2
0 2012-05-13 19:24:17
由於動畫的時間是恆定的，而且事實證明是在正確的時機捕獲它的問題，所以我決定使用通用變量，因此在開始動畫之前，我將變量設置為動畫長度。
例如。
time=400;
然后我用這個計時器制作動畫。 稍后我可以為動畫添加步進功能，以更精確地確定數量...
解決方案3
0 已采納 2012-06-11 18:47:50
我試圖做的事情看起來似乎是不可能的。
提出的問題的解決方案如下：
為孩子的動畫制作步驟，並設置完成動畫所需的時間。
然后使用此變量並設置超時，以便在動畫之后執行。
也可能是任何子代都可以寫入該變量，因此我們不需要搜索它們。
最后，它完美地完成了我的任務。
解決方案4
0 2012-11-04 02:40:02
根據我的收集，您正在嘗試為給定的元素集合完成所有動畫之后運行回調。 在這種情況下，父元素的子元素：
$(parentElement).children().promise().done( function() {
alert("Animation complete!");
}
使用父ID而不是子ID獲取hasMany關系數據
[英]Getting hasMany relationship data using parent id rather than children id
jQuery選擇器，用於獲取所有子元素少於n個的父元素
[英]jQuery selector that gets all parent elements with less than n children
調用jquery .on（document.body）而不是特定元素是否有缺點
[英]Is there a downside to calling jquery .on(document.body) rather than the specific element
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.