fade in background jquery -
i'm trying fade images on background of site isn't working t_t . in advance !
html :
<body> <div id="menu1"></div> <div id="menu2"></div> <div id="menu3"></div> </body> css :
body { background-color: #1f304e; background-image: url('images/bg.jpg'); background-repeat: no-repeat; background-attachment:fixed; background-position: center 0px; } jquery :
$('#menu1').click(function(){ $(body).animate({background : url('images/bg1.jpg') }, 600); }); $('#menu2').click(function(){ $(body).animate({background : url('images/bg2.jpg') }, 600); }); $('#menu3').click(function(){ $(body).animate({background : url('images/bg3.jpg') }, 600); });
you cannot directly animate background image property of element. can fade in entire element though, try create div contains image, , fade in.
try mimic background div instead:
css:
#bg { background-color: #1f304e; background-image: url('images/bg.jpg'); background-repeat: no-repeat; background-attachment:fixed; background-position: center 0px; position: fixed; width: 100%; height: 100%; z-index: -1; } html:
<body> <div id="bg"></div> <div id="menu1"></div> <div id="menu2"></div> <div id="menu3"></div> </body> javascript:
$('#menu1').click(function(){ $("#bg").fadeout(function() { $("#bg").css({background : url('images/bg1.jpg') }); $("#bg").fadein(300); }, 300); }); $('#menu2').click(function(){ $("#bg").fadeout(function() { $("#bg").css({background : url('images/bg2.jpg') }); $("#bg").fadein(300); }, 300); }); $('#menu3').click(function(){ $("#bg").fadeout(function() { $("#bg").css({background : url('images/bg3.jpg') }); $("#bg").fadein(300); }, 300); }); this fade out background, swap image, fade in. if want proper crossfade, need @ least 2 divs in background.
Comments
Post a Comment