jquery - animate?

현재 웹샵을 개발 중이며 애니메이션을 만들고 싶습니다. 사용자가 "장바구니에 추가"버튼을 누르면 장바구니에 제품을 추가하고 싶습니다 (이미지는 장바구니 애니메이션으로 직접 이동합니다). 나는 jquery 함수로 시도했지만 너무 느리다.jquery - animate?

<script> 
var cCount = 0; 
var cId = -1; 

function add_to_cart(){ 
    cId = setInterval(function(){ animateCart(); }, 1); 


} 

function animateCart(){ 
    $("#cart-image").animate({ 
    "left" : "+=1px", 
    "top" : "-=1px" 
    }, 1); 

if(cCount >= 400) 
    clearInterval(cId); 

    cCount++; 
} 
</script>

$ ("# 카트 화상")은 120x120 이미지의 절대 위치 및 불투명 0.5.

스크립트가 작동 중입니다. 카트에 직접 연결되지만 속도가 너무 느립니다. 시간이 너무 오래 걸립니다. 4 ~ 5 초. 나는 점프 효과 같은 것을 원한다. 이것이 가능한가?

출처

2012-09-21 Reteras Remus

잘못하고 있습니다. 애니메이션 메서드 자체가 애니메이션에 사용되므로 추가 간격이 필요하지 않습니다. 그냥 ..

다운로드 최소 파일

최소를,이 경우 최고 100 픽셀에, 원하는 위치로 # 카트 이미지 항목을 이동 100 픽셀

$("#cart-image").animate({ 
    "left" : "100px", 
    "top" : "100px" 
}, 500);

출처

2012-09-21 18:20:29 markz

한 번에 두 개 이상의 픽셀 씩 이동하십시오.

출처

2012-09-21 18:18:37

이 One..it이 절경입니다 시도 남아 파일 (http://1drv.ms/1klFi78)

카트에 담기 파일 (http://1drv.ms/1klFtiZ)

이 Rahul

에 의해 편집 됨

<script type="text/javascript" src="js/jquery-1.9.1.js"></script> 

<script type="text/javascript" src="js/jquery.cart.min.js"></script> 

<body> 

<div id="cart" style="margin-left:80%;">Cart</div> 

<div><img src="your image path" class="image" width="194" height="259" /></div> 

<div><input type="submit" name="cart" value="Add To Cart" id="adcrt" /></div> 

</body> 

<script type="text/javascript"> 

$(document).ready(function(e) { 

$('#adcrt').click(function() 
{ 
    $('.image').imgMove('#cart',0.8,'150','200'); 
}) 
}); 
</script>

출처

2014-03-13 11:22:07

jquery - animate?

답변

관련 문제