Jump to content

javascript animation and change css


mwbarry
 Share

Recommended Posts

Is it possible to use javascript to create a function that changes the css upon an event? I'm trying to make it so that when the user hovers over an image, the image rises 10-15px smoothly rather than immediately as done on this site with the "browsing made easy" etc icons: http://www.mozilla.com/en-US/firefox/features/I'm trying to hone my web development knowledge by figuring out how to implement features from other sites and how they function, but I'm not even sure this is done using javascript.Here is the basic gist that I have so far

<a href="#ulr" id="smart"><img src="img.jpg" alt="img" onmouseover="move()" /></a><script type="text/javascript">function move() {      i dont know what to put here      }</script>      

sorry if this seems hasty, I'm just on my way out the door to work

Link to comment
Share on other sites

after looking through their CSS, I do believe they are using JS. it would be something like along these lines.1) on mouseover, pass the element to the function2) the function executes a setInterval to run every x milliseconds probably wherein it is slowly changing the top property of the element, till it reaches a predetermined number* or, they could just do a loop, changing it through each iteration. not sure off the top of my head which one is smoother3) when the max number of pixels to move is reach, either the loop will stop or the interval will clear itselfto move down, do the opposite but with onmouseout.actually, just looking at the js source code, they are using jQuery.edit:http://mozcom-cdn.mozilla.net/includes/min...&2011-06-21

Edited by thescientist
Link to comment
Share on other sites

JavaScript is the most reliable method (it will work in almost any browser, unless the user has JS disabled). The easier way (IMO) is to use the new CSS 3 transitions and transforms. The downside is that these don't work in many older browsers. In newer browsers, CSS would be more reliable than JS because the chances of a user disabling CSS are very slim.

Link to comment
Share on other sites

JavaScript is the most reliable method (it will work in almost any browser, unless the user has JS disabled). The easier way (IMO) is to use the new CSS 3 transitions and transforms. The downside is that these don't work in many older browsers. In newer browsers, CSS would be more reliable than JS because the chances of a user disabling CSS are very slim.
ooh, something "new"... (to me :) )i don't think that's too big of a 'downside', users who stick with older browsers (or disable JS for that matter) are probably resigned to 'lesser dynamics' anyway, so a "snazzy" menu would not be something they will miss in their browsing experience.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...