Skip to main content

Posts

Showing posts with the label jquery-animation

Custom "animate” jQuery function. How to reset step"s "now” variable?

I need to animate the background-position property of an element with jQuery. By following this tutorial, that uses default jQuery animate function, I had no luck. http://snook.ca/archives/javascript/jquery-bg-image-animations My function was like: $('#content').css( {backgroundPosition: "0 0"} ) .animate( {backgroundPosition:"(0 -900px)"}, {duration:500} ); I had no luck with it, so I tried to code my own function, that changes the vertical background position of an element. It looks like: $.fn.moveBackgroundY = function( pixels, duration, easing ) { return this.animate( { pixels: pixels }, { step: function(now,fx) { console.log("Background Y position - " + now); $(this).css({ backgroundPosition: '0px ' + now + 'px',

jquery/js gliding/sliding navigation item effect

I'm trying to decipher effects like the one seen on http://www.htmldrive.net/items/demo/71/Dynamic-navigation-menu-with-scrolling-color-glide-followed-with-jQuery but I'm not very familiar with jquery/js (unless the code is all spelled out for me) I haven't been able to find many other examples of this menu effect (I'm probably using the wrong keywords). Can anyone help me figure out how these are generally created? I'd like to do so on my site (though with a thick underline instead of highlight). Thanks! edit- I realize I can just use one of these plugins, but I'd really like to understand what's going on/do my own