0

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?

rory-h
  • 660
  • 1
  • 12
  • 30

2 Answers2

0

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.

Community
  • 1
  • 1
StefandenHartog
  • 21
  • 2
  • This is the section I'm talking about - it's the What's New section. View here: http://54.169.61.153/responsibility/coffeehouse/merchandise/mobile-apps/starbucks-mobile-applications – rory-h Jul 12 '16 at 07:09
0

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>
Diego Betto
  • 721
  • 6
  • 19
  • Apologies - this is the section I'm talking about - it's the What's New section. As you can see, there are breaks between background images. View here: http://54.169.61.153/responsibility/coffeehouse/merchandise/mobile-apps/starbucks-mobile-applications – rory-h Jul 12 '16 at 07:07
  • It's ok, you are using css background images. But you cannot animate background images. Add a div #backgrounds inside #what_new_back. Then add all images like the demo inside #backgrounds. Then, like the demo, animate them :) – Diego Betto Jul 12 '16 at 07:26
  • I'm a bit confused what I should do here. – rory-h Jul 12 '16 at 07:34
  • Created demo. Added #backgrounds in html, some css lines ( look for "NEW CODE" at the end of css), and added a simple js https://jsfiddle.net/5n6ocwoz/ – Diego Betto Jul 12 '16 at 07:42
  • this works thank you. but when I added the div to my code. my last section just disappeared - the background image on my last section became hidden. – rory-h Jul 12 '16 at 07:58
  • Of course I can't do all your work :) But this is the response for your question. PS. Check if all images that you need are inside #backgrounds (4?) ;) – Diego Betto Jul 12 '16 at 08:00
  • Also remember to flag the answer if it helped you – Diego Betto Jul 12 '16 at 08:39