이상한 jquery 애니메이션 동작

두 이벤트가 있습니다 첫 번째로 이동하고 확장하는 이미지를 클릭하십시오 두 번째로 이미지 바깥 쪽을 클릭하면 해당 이미지가 이동하고 다시 축소됩니다. 위치. 당신은 그것은 이것 때문에 아주 오래 복용이상한 jquery 애니메이션 동작

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

출처

2013-07-29 Wanting to learn

테스트를 위해 jsFiddle 또는 유사한 것을 만들 수 있습니까? –

님이 jsfiddle을 추가했습니다. –

Woz가 +1 했습니까? :) – YD1m

당신이 불에 애니메이션 (30)와 같은 초 동안 기다릴 필요가 외부 영역 (수축)을 클릭 몇 가지 이유

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

모든 형제를 반복하고 800ms에 애니메이션을 적용하므로 ... 나머지 980 개의 이미지가 총 대구 전에 27 초입니다. e가 실행됩니다.

저는 애니메이션을 단순화했습니다 ... 지금은 작동하지만 분명히 약간의 조정이 필요합니다. = 새로운 배열

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

VAR 제목 ("1", "2", "3", "4", "5", "6", "7", "8", "9");

var image=0; 
var p;

$ ("그리드 리. ')을 클릭 (함수() { VAR 위치 = $ (이)있는 .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);  
});

출처

2013-07-29 18:19:19

, 애니메이션은

은 당신이 할 수있는 것은 애니메이션에 stop() 기능을 추가입니다 실행에서 다른 코드를 중지 어떤 시간이 오래 걸릴하거나 추가 할 수 있습니다

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

페이지에서 현재 애니메이션을 모두 중지합니다.
당신은

<ul class="grid">은 clearQueue 함수에 대한 자세한 정보를 원하시면 http://api.jquery.com/clearQueue/를 참조하여 내의 모든 애니메이션을 중지 $('*')$('.grid')에 변경할 수 있습니다.

출처

2013-07-29 18:44:57 putvande

이상한 jquery 애니메이션 동작

답변

관련 문제