Javascript image cross-fade on page change -

Javascript image cross-fade on page change -

i'm novice html developer , while haven't been taught javascript @ all, i'd include in first bigger webpage. layout looks this, title, menu , image @ top.

the image changes based on chosen menu item. i'd create images fade smoothly between each other, guides i've found on net describe images stacked on top of each other create gallery.

how designate each image html page? work or have alter webpage drastically alter content , not load separate html?

look @ jquery's animate function: goes this:

$("#idofyourimage").animate({opacity: 1}, 1000, function(){ //function executed when animation done })

the sec parameter (1000) stands duration of animation.

for work, have set image css opacity: 0, can animate between opacity 0 , opacity 1 ( called fade-in )

the dollar sign stands jquery, have include script create work

javascript image cross-fade