링크를 클릭 할 때 div 상단을 따라 이미지를 이동하는 방법

Question

나는이 모든 것을 처음 접했고이 사이트와 같은 이미지 이동 효과를 얻으려고합니다 : http://www.heroku.com/. 탐색 링크를 클릭하면 이미지가 div를 따라 이동하도록하려면 어떻게해야합니까?

Answer 1

아마 JQuery가 가장 좋습니다.

$(".menu").click(function(){ 
    $("#moveable").animate({ 

    right: '+=150', 

    }, 500, function() { 
    // Animation complete. 
}); 
}); 

당신은 너무 일부 CSS 스타일링이 필요합니다 :이 같은 JQuery와 사용하는 것보다 당신은

<a class='menu'>Option 1</a> 
<a class='menu'>Option 2</a> 
<a class='menu'>Option 3</a> 

<div id='moveable'></div> 

을 정의 할 수 있습니다. 희망이 조금 도움이됩니다.

이 링크도 도움이 될 수 http://api.jquery.com/animate/

Answer 2

당신은 크레인을 클릭하는 동안 함께 이동 화살표 강조 메인 페이지의 종이 접기 단계의 이미지를 참조하고 있습니까? jQuery 애니메이션 메서드를 사용하는 바로 그 페이지에서 home.js 파일의 전체 코드를 볼 수 있습니다.

당신이 시도 할 내가 같이 비슷한 갈 것 같은 (jQuery를 사용) 할 경우

물론

$(function() { 
    var slider = $('#slider'), 
     first = $('.list-item').first(), 
     margin = (first.outerWidth() - first.innerWidth())/2, 
     // compute the offset for the slider 
     // you will have to tailor those to your specific implementation 
     offset = (slider.outerWidth()/2) + 
       ((first.outerWidth() - slider.outerWidth())/2); 
    // attach click event to the menu elements 
    $('.list-item').on('click', function() { 
     var self = $(this), 
      siblings = self.siblings(), 
      x; 
     // if not active, move the slider accordingly 
     if (!self.hasClass('active')) { 
      siblings.removeClass('active'); 
      self.addClass('active'); 
      x = offset + margin + self.position().left; 
      // the magic happens here :) 
      slider.animate({ 
       left: x 
      }, 500); 
     } 
    }); 
    // trigger the click event for the first list element 
    first.trigger('click'); 
}); 

이전에 당신이 제대로 HTML 요소를 준비해야, 어떤 스타일을 추가를, http://jsfiddle.net/krwck/bjVdN/10/