2

2 つのイベントが進行中です。1 つ目は画像をクリックすると移動して拡大し、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 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": "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 に答える