2012-12-02 7 views
0

이미지 확대/축소 효과를 구현하려고합니다. 오버플로가있는 컨테이너에 있기 때문에 : 숨김, 너비를 늘리고 왼쪽으로 밀어 가면 트릭을해야합니다.jQuery에서 두 번째 애니메이션을 어떻게 추가합니까?

/* Zoom in images */ 
$('img.vectimg').load(function() { 
    $(this).data('width', this.width); 
}).bind('mouseenter mouseleave', function(e) { 
    $(this).stop().animate({ 
     width: $(this).data('width') * (e.type === 'mouseenter' ? 1.2 : 1) 
    }); 
}); 

하지만 어떻게 그것을 왼쪽으로 이동 애니메이션을 추가 할 수 있습니다

나는 그것이 폭의 증가 수 있도록 관리했습니다? 나는 이것을 덧붙이려고했지만/작동하지 않았다.

$(this).stop().animate({ 
      left: $(this).position().left + 500 
     }); 

는 정말 :) 하드 데려다하지 마십시오

+1

귀하의 요소 ** 위치는 **해야합니다 ** 상대 **로 설정하면 jQuery 콜백을 사용하여 위치가 변경됩니다. – Chipmunk

+0

이미 해봤습니다. – slownage

답변

1

동일한 animate() 호출에 여러 속성을 추가 할 수있는 완전한 초보자입니다.

$(this).stop().animate({ 
    width: $(this).data('width') * (e.type === 'mouseenter' ? 1.2 : 1), 
    left: $(this).position().left + (e.type === 'mouseenter' ? 500 : -500) 
}); 

더 읽기 : 다음 애니메이션 http://api.jquery.com/animate/

+0

그러면 마우스 오른쪽 버튼과 마우스 왼쪽 버튼에서 계속 오른쪽으로 이동합니다. – Levi

+0

맞지만 애니메이션 호출에 여러 속성을 추가하는 방법의 예 * OP가 자신의 코드에 맞도록하기 위해 수행하는 작업은 이들에게 달려 있습니다. 그것들은 삼항 연산자에 익숙해 보입니다. 그래서 나는 이것이 이것들을위한 방책이 될 것이라고 확신합니다. – ahren

+0

답을 알고 싶지만 어떻게 할 수 있습니까? 왼쪽 : $ (this) .position(). left + 500' 올바른 일을하십시오. – slownage

1

사용 jQuery를 animate() 콜백 함수를.

체크 아웃 문서 here.

: 등 당신은 요소의 positionrelative에 (CSS)에 순서가 왼쪽으로 조작 할 수있는 설정해야합니다 오른쪽 속성

관련 문제