자바 스크립트, 애니메이션으로 이미지 변경

Question

화면 중앙에 div가 있고 아래에 몇 개의 링크가있는 페이지가 있습니다. 각 링크를 클릭하면 div에 다른 이미지가 표시되어야합니다. 링크를 클릭하면 현재 이미지가 화면 왼쪽으로 이동하고 페이드 아웃해야하며 동시에 새 이미지가 페이드와 함께 오른쪽에서 나타나야하고 div에 위치해야합니다. 내가 지금까지했던 것은 이미지가 왼쪽으로 이동 전에 을 변경하는 순간

OnClick=("changeImage('name')") 



function changeImage(param){ 
var image = $("#div"); 
image.animate({"queue": true, opacity: 0.0, right: '650px'}, 1200); 
image.attr('src', 'img/'+param+'.png'); 
} 

각 링크에서 호출, 다음 스크립트입니다. 그런 다음 사라집니다. 첫 번째 이미지를 이동하고, 페이드 아웃 한 다음 오른쪽에서 두 번째 이미지를 표시하고 싶습니다. 도와 주시겠습니까? 효과 및 애니메이션 : http://jsfiddle.net/nKpqU/

jQuery의 효과 queue 단지 그 적용 : 는

가

Answer 1

$("#div").click(function(){ 
    var image = $(this); 
    var param = 'example'; 
    image.animate({opacity: 0.0, right: '1000px'}, 1200).delay(100).animate({opacity: 1, right: '200px'}, 1200); 
    setTimeout(function(){ image.attr('src', 'img/'+param+'.png').css('right','-1000px'); },1200); 
}); 

바이올린 감사합니다. 또한 onclick 설정을 click 이벤트를 jQuery의 .click으로 바인딩하도록 변경했습니다.