奇怪的jQuery動畫行爲

我有兩個事件正在進行 1st你點擊一個圖像它移動並展開第二次點擊圖像外部，它移動並縮回到它的組織。位置。奇怪的jQuery動畫行爲

當你點擊你必須等待像30秒的動畫火災外區（萎縮）

$(document).ready(function() { 
var titles=new Array("1","2","3", "4","5", "6", "7", "8","9"); 

    var image=0; 
    var p;  

$('.grid li').click(function() { 
var location =$(this).index(); 
image = $(this).position(); 

$(this).siblings().animate({opacity: 1, top:'15px'},800,function() { 
    $(this).siblings().css("top", "0px"); 
    p =$(this).parent().detach(); 
    $('.pop_image img ').css("left", image.left); 
    $('.pop_image img').css("top", image.top); 
    $('.pop_title ').css("left", image.left); 
    $('.pop_title').css("top", image.top-50);     

    $('.pop_image img').animate({marginLeft: '20%',marginRight: '20%', marginTop: '20%', top: '0', left: '0'},800);   
    $('.pop_image img').attr("src", location+1 +".jpg"); 
    $('.pop_title').animate({marginLeft: '20%',marginRight: '20%', marginTop: '20%', top: '-50px', left: '0'},800); 
    $('.pop_title ').text(titles[location]); 
    $('.pop_title').animate({fontSize: '200%'},800);  
    $('.pop_image img').animate({width:'679px', height:'422px'},800);  
     }); 
}); 

$('#hidden').click(function() {  

    $('.pop_title').animate({fontSize: '100%'},800);  
    $('.pop_image img').animate({width:'339px', height:'211px'},800);  
    $('.pop_image img').animate({left: image.left, right: image.top },800); 
    $('.pop_title').animate({left: image.left, right: image.top },800); 
    }); 
});

JSFIDDLE

來源

2013-07-29 Wanting to learn

你能爲我們創建一個jsFiddle或類似的測試嗎？ –

新增了jsfiddle –

Woz獲得+1了嗎？ :) – YD1m

它的服用，因爲這很長的一些原因：

$(this).siblings().animate({opacity: 1, top:'15px'},800,function() {

將通過每一個兄弟循環，並在800毫秒它們的動畫......所以，9個圖像，這是一個總的27秒你的鱈魚的其餘部分之前e執行。

我簡化了您的動畫相當多的...所以它現在正在工作，但顯然仍需要一點調整。

http://jsfiddle.net/XYZZx/80/

變種標題=新陣列（「1」，「2」，「3」，「4」，「5」，「6」，「7」，「8」，「9」）;

var image=0; 
var p;

$（ '網格里。'）點擊（函數（）{ VAR位置= $（本）的.index（）; 圖像= $（本）.POSITION（）;

$(this).siblings().animate({"opacity":1,"top": "0px"}); 
p = $(this).parent().detach(); 
$('.pop_image img ').css({ 
    "left":image.left, 
    "top":image.top 
}); 
$('.pop_title ').css({ 
    "left":image.left, 
    "top":image.top-50 
});    

$('.pop_image img').animate({marginLeft: '20%',marginRight: '20%', marginTop: '20%', top: '0', left: '0',width:'679px', height:'422px'},800);   
$('.pop_title').animate({marginLeft: '20%',marginRight: '20%', marginTop: '20%', top: '-50px', left: '0',fontSize: '200%'},800); 
$('.pop_title ').text(titles[location]); 

    }); 


$('#hidden').click(function() { 
    $('.pop_title').animate({fontSize: '100%',left: image.left, right: image.top},800);  
    $('.pop_image img').animate({width:'339px', height:'211px',left: image.left, right: image.top},800);  
});

來源

2013-07-29 18:19:19

正如蒂姆提到，你的動畫只是需要很長的時間從什麼停止執行任何其他代碼

你可以做的就是添加stop()功能將您的動畫，或者你可以添加：

$('*').clearQueue() to your '$('#hidden').click(...` function.

停止頁面上所有當前動畫停止。
您可以更改$('*')到$('.grid')停止在您<ul class="grid">

有關clearQueue功能的詳細信息，請參閱http://api.jquery.com/clearQueue/所有動畫。

來源

2013-07-29 18:44:57 putvande

奇怪的jQuery動畫行爲

回答

相關問題