Question

我发生了两件事 1您单击它移动并展开的图像第二个你在图像外面点击它然后移动并收缩回它的组织。位置。

出于某种原因，当您单击外部区域时，您必须等待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 titles = new Array（＆＃34; 1＆＃34;，＆＃34; 2＆＃34;，＆＃34; 3＆＃34;，＆＃34; 4＆＃34;，＆＃34; 5＆＃34;，＆＃34; 6＆＃34;，＆＃34; 7＆＃34;，＆＃34; 8＆＃34;，＆＃34; 9＆＃34;）;

 var image=0;
 var p;

$（＆＃39; .grid li＆＃39;）。click（function（）{ var location = $（this）.index（）; image = $（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);     
});

Answer 2

正如蒂姆所说，你的动画需要花费很长时间才能阻止任何其他代码的执行。

您可以做的是为动画添加stop()功能，或者您可以添加：

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

停止页面上所有当前动画您可以将$('*')更改为$('.grid')以停止<ul class="grid">

中的所有动画

有关clearQueue功能的详情，请参阅http://api.jquery.com/clearQueue/。

奇怪的jquery动画行为

2 个答案: