Question

96

How can I make a fade transition with the background images

rated 0 times [ 97] [ 1] / answers: 1 / hits: 18793 / 10 Years ago, fri, april 11, 2014, 12:00:00

I have 5 buttons and when i pass my pointer o some of then, i want change the background image but with a fade effect.

HTML:

<body>

  <div id=content class=row>

    <div class=large-4 center columns >

      <a id=column1 class=button expand href=http://www.page1.com>WEB 1</a>

    </div>

    <div class=large-4 center columns>

      <a id=column2 class=button expand href=http://www.page2.com>WEB 2</a>

    </div>

    <div class=large-4 center columns>

      <a id=columna3 class=button expand href=http://www.page3.com>WEB 3</a>

    </div>

    <div class=large-4 large-offset-2 center columns>

      <a id=columna4 class=button expand href=http://www.page4.com>WEB 4</a>

    </div>  

    <div class=large-4 center columns end>

      <a id=columna5 class=button expand href=http://www.page5.com>WEB 5</a>

    </div>

  </div>

</body>

Jquery:

<script src=js/jquery.js></script>

<script src=js/foundation.min.js></script>

<script>

  $(document).foundation();



  $(#column1).mouseover(function(){

      $(body).css('background-image', 'url(img/dib1.jpg)');  

  });



  $(#column2).mouseover(function(){

      $(body).css('background-image', 'url(img/dib2.jpg)');

  });



  $(#column3).mouseover(function(){

      $(body).css('background-image', 'url(img/dib3.jpg)');

  });



  $(#columna4).mouseover(function(){

      $(body).css('background-image', 'url(img/dib4.jpeg)');

  });



  $(#column5).mouseover(function(){

      $(body).css('background-image', 'url(img/dib5.jpg)');

  });



</script>

The problem is when change the image, is so quickly, for that i want put a fade transition, tried put fadetoggle slow, but disappear all my content because use body for my selector.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

felix

Add To Favorites

Follow

Total Points: 47

Total Questions: 91

Total Answers: 110

Location: Angola

Member since Tue, May 5, 2020

4 Years ago

answered 10 Years ago kylanalis · Accepted Answer

Here is a little mock up I made. Its just a basis, but should be easily modifiable.

http://jsfiddle.net/sB8hU/

HTML:

<div id=content class=row>

        <div class=large-4 center columns >

          <a id=column1 class=button expand data-bg=http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg href=http://www.page1.com>WEB 1</a>

        </div>

        <div class=large-4 center columns>

          <a id=column2 class=button expand data-bg=http://www.psdgraphics.com/file/abstract-background.jpg href=http://www.page2.com>WEB 2</a>

        </div>

        <div class=large-4 center columns>

          <a id=columna3 class=button expand data-bg=http://wallpapergrab.com/wp-content/uploads/2014/03/start-3d-background-wallpapers.jpg href=http://www.page3.com>WEB 3</a>

        </div>

        <div class=large-4 large-offset-2 center columns>

          <a id=columna4 class=button expand data-bg=http://sciencelakes.com/data_images/out/26/8856597-daisies-green-background.jpg href=http://www.page4.com>WEB 4</a>

        </div>  

        <div class=large-4 center columns end>

          <a id=columna5 class=button expand data-bg=http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg href=http://www.page5.com>WEB 5</a>

        </div>

      </div>



<div class=bg1></div>

<div class=bg2></div>

jQuery:

$('.bg1, .bg2').height( $(window).height() );

$('.button').hover(function(){

    var bgImage = $(this).data('bg');

    if( $('.bg1').is(':visible') ){

        $('.bg2').css('background-image', 'url(' + bgImage + ')');

        $('.bg1').fadeOut(200, function(){

            $('.bg2').fadeIn(200);

        });

    } else {

        $('.bg1').css('background-image', 'url(' + bgImage + ')');

        $('.bg2').fadeOut(200, function(){

            $('.bg1').fadeIn(200);

        });

    }

});