Нечетное поведение анимации jquery

Question

У меня два события: 1st Вы щелкаете изображение, которое оно перемещает и расширяется 2nd вы щелкаете за пределами изображения, и оно перемещается и сжимается обратно в его организацию. должность.

по какой-то причине, когда вы щелкните за пределами области, вы должны ждать, как 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

Answer 1

Это очень долго, принимая из-за этого:

$(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;  

$ ('сетки ли.') Нажмите (функция() { вар место = $ (это) .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);  
}); 

Answer 2

Как отметил Тим, ваши анимации просто занять много времени, что останавливает любой другой код от выполнения

Что вы можете сделать, это добавить stop() функции анимации или вы могли бы добавить:.

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

Остановить все текущие анимации на вашей странице.
Вы можете изменить $('*') к $('.grid'), чтобы остановить все анимации в вашей <ul class="grid">

http://api.jquery.com/clearQueue/ Смотрите для получения дополнительной информации о функции clearQueue.