css - How can i change the position of an image in Jquery? -
i have image this:
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
Post a Comment