Odd jquery animation behavior

Refresh

December 2018

Views

73 time

2

I have two events going on 1st You click an image it moves and expands 2nd you click outside the image and it moves and shrinks back to it's org. position.

for some reason when you click the outside area you have to wait for like 30 seconds for the animation to fire (the shrinking)

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

2 answers

1

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

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

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

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

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

1

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

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

Это будет цикл через каждый собрата и анимировать их на 800 мс ... так, 9 изображений, что это в общей сложности 27 секунд до того, как остальная часть кода выполняется.

Я упростил анимацию совсем немного ... так что теперь он работает, но, очевидно, все еще нужен немного наладка.

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);     
});