2

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

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

4

2 回答 2

1

因为这个需要很长时间：

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

这将循环遍历每个兄弟并以 800 毫秒为它们设置动画……因此，在执行其余代码之前总共需要 27 秒的 9 幅图像。

我稍微简化了你的动画......所以它现在可以工作了，但显然仍然需要一些调整。

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 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);     
});
于 2013-07-29T18:19:19.123 回答
1

正如 Tim 所提到的，您的动画只需要很长时间就会阻止任何其他代码执行。

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

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

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

有关该功能的更多信息，请参阅http://api.jquery.com/clearQueue/ 。clearQueue

于 2013-07-29T18:44:57.300 回答