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

在行动中看到更清晰 - 此链接here - 在新内容

部分下

我想知道如何在点击之间添加平滑过渡，并确保在单击每个标签时背景图像具有 slideUp 动画？

Answer 1

请看这个：

Animate background image change with jQuery

无法为背景本身设置动画，但可以为包含背景的元素设置动画。

Answer 2

没有你的HTML和CSS，我无法给你一个正确的答案，但我认为这个演示可以帮助你

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

基本上你无法为背景设置动画，你需要使用div或imgs并为它们设置动画。

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

您可以使用包装器（#backgrounds，＃content），使用position：absolute和z-index。像

这样的东西

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

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

2 个答案: