css - How can i change the position of an image in Jquery? -


i have image this:

enter image description here

and want change position in jquery on hover make the image changing.

i dont want use .animate function shift image but, have image scroll each frame.

right have width set, , overflow hidden can see 1 image @ time.

my 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> 

my 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; } 

it's not entirely clear trying accomplish.

if trying make sprite animation, take @ spritely. javascript automatically move sprite emulate keyframe animation. supply width , how sprite should move , rest.

if trying pan across image , stop, best bet would use animate on background x position. doubt intention based on sprite you've supplied , fact requested not use animate.

you emulate animation css using @keyframes. see fiddle: http://jsfiddle.net/zlyrn/

note: css animations not cross-browser compatible without polyfill.


Comments

Popular posts from this blog

java - Run a .jar on Heroku -

java - Jtable duplicate Rows -

validation - How to pass paramaters like unix into windows batch file -