Der Versuch, glatte Bild Übergang zwischen Hintergrundbildern hinzufügen

Question

Dies ist der Code, den ich derzeit haben:

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

, um zu sehen, sie in Aktion klarer - Link here - unter Abschnitt Was

Ich frage New

ist, wie zu tun Ich füge einen fließenden Übergang zwischen Klicks hinzu und stelle sicher, dass das Hintergrundbild die Animation slideUp hat, wenn auf jede Registerkarte geklickt wird?

Answer 1

Sehen Sie diese bitte:

Animate background image change with jQuery

Es ist nicht möglich, den Hintergrund selbst, zu animieren, aber es ist möglich, das Element mit dem Hintergrund zu animieren.

Answer 2

Ohne Ihre HTML und CSS kann ich Ihnen nicht eine richtige Antwort geben, aber ich denke, dass diese Demo Sie

helfen können

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

Grundsätzlich können Sie nicht Hintergründe animieren, müssen Sie divs verwenden oder imgs und animieren sie.

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

Sie einen Wrapper verwenden (#backgrounds, #content) Verwenden Position: absolute und z-Index. So etwas wie

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