Animate background image change with jQuery

Question

I finally have this working now but would like to know how I can use JQuery s animate function to make the background image changes fade in nicely when you hover over the list items on the homepage -  http   www thebalancedbody ca   The Code to make this happen so far is -     ul frontpage li 277 a   hover      function                 homepage container   css  background-image    url http   www thebalancedbody ca wp-content themes balancedbody V1 images nutrition background jpg                function                 homepage container   css  background-image    url http   www thebalancedbody ca wp-content themes balancedbody V1 images default background jpg                  ul frontpage li 297 a   hover      function                 homepage container   css  background-image    url http   www thebalancedbody ca wp-content themes balancedbody V1 images vibration training jpg                function                 homepage container   css  background-image    url http   www thebalancedbody ca wp-content themes balancedbody V1 images default background jpg                etc etc  How would I add the ANIMATE function to this please - thanks     Thanks  Jonathan

User · Answer

lt style type  text css  gt       homepage outter   position relative  width 100   height 100         homepage inner   position absolute  top 0  left 0  z-index 10  width 100   height 100         homepage underlay   position absolute  top 0  left 0  z-index 9  width 800px  height 500px  display none    lt  style gt    lt script type  text javascript  gt        function                  a   hover function                       homepage underlay   fadeOut  slow   function                           homepage underlay   css    background-image    url  http   www thebalancedbody ca wp-content themes balancedbody V1 images nutrition background jpg                             homepage underlay   fadeIn  slow                                function                       homepage underlay   fadeOut  slow   function                           homepage underlay   css    background-image    url  http   www thebalancedbody ca wp-content themes balancedbody V1 images default background jpg                             homepage underlay   fadeIn  slow                                             lt  script gt     lt body gt   lt div id  homepage outter  gt       lt div id  homepage inner  gt           lt a href     id  run  gt run lt  a gt       lt  div gt       lt div id  homepage underlay  gt  lt  div gt   lt  div gt

User · Answer

building on XGreen s approach above  with a few tweaks you can have an animated looping background  See here for example   http   jsfiddle net srd76 36     document  ready function     var images   Array  http   placekitten com 500 200                   http   placekitten com 499 200                   http   placekitten com 501 200                   http   placekitten com 500 199    var currimg   0    function loadimg            background   animate   opacity  1    500 function               finished animating  minifade out and fade new back in                        background   animate   opacity  0 7    100 function                 currimg                 if currimg  gt  images length-1                    currimg 0                              var newimage   images currimg                  swap out bg src                                 background   css  background-image    url   newimage                       animate fully back in                 background   animate   opacity  1    400 function                       set timer for next                 setTimeout loadimg 5000                                                 setTimeout loadimg 5000

User · Answer

clickable   hover function              selector   stop true true  fadeTo  400   0 0  function                 selector   css  background-image   url  assets img pic2 jpg                          selector   fadeTo  400   1      function              selector   stop false true  fadeTo  400   0 0  function                 selector   css  background-image   url  assets img pic jpg                          selector   fadeTo  400   1

User · Answer

It can be done by jquery and css  i did it in a way that can be used in dynamic situations   you just have to change background-image in jquery and it will do every thing   also you can change the time in css   The fiddle    https   jsfiddle net Naderial zohfvqz7   Html    lt div class  test  gt      CSS     test        as default  we set a background-image   but it is not nessesary      background-image  url http   lorempixel com 400 200     width  200px    height  200px       we set transition to  all  properies - but you can use it just for background image either - by default the time is set to 1 second  you can change it yourself     transition  linear all 1s       if you don t use delay   background will disapear and transition will start from a white background - you have to set the transition-delay the same as transition time OR more   so there won t be any problems      -webkit-transition-delay  1s    Safari      transition-delay  1s      JS       test   click function         you can use all properties   background-color  - background-image         this  css        background-image    url http   lorempixel com 400 200

User · Answer

I had the same problem  after loads of research and Googling  I found the following solution worked best for me  plenty of trial and error went into this one   --- SOLVED   SOLUTION ---  JS    document  ready function                    header   delay 5000  queue function                      this  css   background-image   url  lt  php bloginfo  template url     gt  img header-boy-hover jpg                                    CSS  header       -webkit-transition all 1s ease-in      -moz-transition all 1s ease-in      -o-transition all 1s ease-in      -ms-transition all 1s ease-in      transition all 1s ease-in

User · Answer

The simplest solution would be to wrap the element with a div  That wrapping div would have the hidden background image that would appear as the inner element fades   Here s some example javascript       wrapper   hover function event           inner   fadeOut 300      function event           inner   fadeIn 300         and here s the html to go along with it    lt div id  wrapper  gt  lt div id  inner  gt Your inner text lt  div gt  lt  div gt

User · Answer

Have a look at this jQuery plugin from OvalPixels   It may do the trick

User · Answer

Ok  I figured it out  this is pretty simple with a little html trick   http   jsfiddle net kRjrn 8   HTML   lt body gt       lt div id  background  gt        lt  div gt       lt p gt hello world lt  p gt       lt p gt hello world lt  p gt       lt p gt hello world lt  p gt       lt p gt hello world lt  p gt       lt  body gt     javascript    document  ready function            background   animate   opacity  1    3000          CSS   background       background-image  url  http   media noupe com  uploads 2009 10 wallpaper-pattern jpg        opacity  0      margin  0      padding  0      z-index  -1      position  absolute      width  100       height  100

User · Answer

I don t think this can be done using jQuery s animate function because the background image does not have the necessary CSS properties to do such fading  jQuery can only utilize what the browser makes possible   jQuery experts  correct me if I m wrong of course    I guess you would have to work around this by not using genuine background-images  but div elements containing the image  positioned using position  absolute  or fixed   and z-index for stacking  You would then animate those divs

[jquery] Animate background image change with jQuery

Examples related to jquery

Examples related to jquery-animate