尝试在背景图像之间添加平滑的图像过渡

Question

This is the code I currently have:

  $('ul.whats_new_ul li').click(function(){
      var tab_id = $(this).attr('data-tab');
      $('ul.whats_new_ul li').removeClass('current');
      $('.tab-content').removeClass('current');
      $(this).addClass('current');
      $("#"+tab_id).addClass('current');


      if(tab_id == 'Messages'){
          $('#what_new_back').css('background-image', 'url(img/mobile-app/global/whts_new.jpg)' );
      }else if(tab_id == 'gift'){
          $('#what_new_back').css('background-image', 'url(img/mobile-app/global/gift_back.jpg)' );
      }else if(tab_id == 'locators'){
          $('#what_new_back').css('background-image', 'url(img/mobile-app/global/locater.jpg)' );
      }else if(tab_id == 'menu'){
          $('#what_new_back').css('background-image', 'url(img/mobile-app/global/menu_back.jpg)' );
      }
  });   

to see it clearer in action - this link here - under section What's New

I wondering how do I add a smooth transition between clicks and make sure the background image has the slideUp animation when each tab is clicked?

Answer 1

See this please:

Animate background image change with jQuery

It is not possible to animate the background itself, but it is possible to animate the element containing the background.

Answer 2

Without your HTML and CSS I can't give you a correct response but I think that this demo can help you

http://css3.bradshawenterprises.com/cfimg/

Basically you can't animate backgrounds, you need to use divs or imgs and animate them.

"Demo 6 -Fading between multiple images on click"

<div id="cf7" class="shadow">
  <img class='opaque' src="/images/Windows%20Logo.jpg" />
  <img src="/images/Turtle.jpg;" />
  <img src="/images/Rainbow%20Worm.jpg;" />
  <img src="/images/Birdman.jpg;" />
</div>

You can use a wrapper (#backgrounds, #content), use position:absolute and z-index. Something like

<div style="position:relative">
  <div id="content" style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:20">
  ...
  </div>

  <div id="backgrounds" style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:10">
    <img .../>
    <img .../>
    ...
  </div>
</div>