试图在背景图像之间添加平滑的图像转换

Question

这是我目前的代码：

  $('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)' );
      }
  });   

为了更清楚地看到它的行动--这个链接这里 --在“什么是新”一节下

我想知道如何在单击之间添加一个平稳的转换，并确保在单击每个选项卡时背景图像具有slideUp动画？

Answer 1

请看这个：

用jQuery动画化背景图像

不可能将背景本身动画化，但可以将包含背景的元素动画化。

Answer 2

没有HTML和CSS，我无法给出正确的响应，但我认为这个演示可以帮助您

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

基本上你不能动画背景，你需要使用div或imgs和动画他们。

“演示6 -Fading之间的多个图像点击”

<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>

你可以使用包装器(#背景，#内容)，使用位置:绝对和z-索引.有点像

<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>