jquery - 奇怪的 jquery 动画行为

Question

我有两个事件正在进行 第一次您单击图像，它会移动并展开 第二，您在图像外部单击，它会移动并缩小回到它的组织。位置。

出于某种原因，当您单击外部区域时，您必须等待 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 秒。

我对你的动画进行了相当多的简化...所以它现在可以工作了，但显然仍然需要一些调整。

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

var title=new Array("1","2","3", "4","5", "6", "7", "8","9");

 var image=0;
 var p;     

$('.grid li').click(function() { var 位置 =$(this).index(); 图像 = $(this).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);     
});