Jquery에서 이미지 위치를 어떻게 바꿀 수 있습니까?

Question

는이 같은 이미지가 있습니다

을 그리고 난 그것이 이미지 변화를 보이게 호버에 JQuery와의 위치를 ​​변경하고 싶습니다.

이미지를 이동하려면 .animate 기능을 사용하지 말고 기본적으로 각 프레임으로 이미지 스크롤을 사용하십시오.

지금은 너비가 설정되어 있고 내 오버플로가 숨겨져있어서 한 번에 하나의 이미지 만 볼 수 있습니다.

내 HTML

<ul class="icons"> 
        <li id="trasklogo"><img src="img/icons/nav-se1aec3ccea.png" width="75" height="823" /></li> 
        <li><img src="img/icons/sprite_about.png" width="1050" height="70" /></li> 
        <li><img src="img/icons/sprite_genetics.png" width="1050" height="70" /></li> 
        <li><img src="img/icons/sprite_innovation.png" width="1050" height="70" /></li> 
        <li><img src="img/icons/sprite_media.png" width="1050" height="70" /></li> 
       </ul> 

내 CSS

ul li, { 
list-style: none; 
} 

li { 
display: list-item; 
text-align: -webkit-match-parent; 
} 
.menu .icons #trasklogo { 
height: 87px; 
overflow: hidden; 
} 
.container .menu .icons { 
width: 75px; 
overflow: hidden; 
} 

Answer 1

이 아니에요 당신이 달성하려고하는 것을 완전히 취소합니다.

이 스프라이트를 애니메이션으로 만들려는 경우 Spritely을 살펴보십시오. 이 자바 스크립트는 자동으로 스프라이트를 이동시켜 키 프레임 애니메이션을 에뮬레이션합니다. 스프라이트가 이동해야하는 폭과 속도를 제공하면 나머지는 수행합니다.

이미지를 천천히 이동하여 멈추고 자한다면 은이면 배경 x 위치에 애니메이션을 사용하는 것이 가장 좋습니다. 나는 당신이 제공 한 Sprite와 animate 사용을 요구하지 않았다는 사실에 근거하여 이것이 당신의 의도라고 생각하지 않습니다.

@keyframes을 사용하여 CSS로이 애니메이션을 에뮬레이션 할 수도 있습니다. 이 바이올린보기 : http://jsfiddle.net/ZLyrN/

참고 : CSS 애니메이션은 브라우저가 호환되지 않으며 polyfill 없이는 호환되지 않습니다.

Answer 2

JQuery를 사용하면 Javascript에서 해당 효과를 쉽게 만들 수 있습니다.

setInterval(function() { 
    // parse the current margin to an integer and substract the with of one frame 
    var nr=parseInt($("#sw").css("margin-left")) - 70; 
    // reset margin to 0 if margin > last frame 
    if(nr<=-1050) { 
     nr=0; 
    } 
    // set the new margin 
    $("#sw").css("margin-left", nr+"px"); 
}, 50); 

CSS :

#wr { 
    width:70px; 
    overflow:hidden; 
} 

HTML :

<div id="wr"> 
    <img id="sw" src="http://i.stack.imgur.com/hCX5s.png" /> 
</div> 

근무 예 : http://jsfiddle.net/U2MrB/