javascript - How can I make a fade transition with the background images

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="">WEB 1</a>
    </div>
    <div class="large-4 center columns">
      <a id="column2" class="button expand" href="">WEB 2</a>
    </div>
    <div class="large-4 center columns">
      <a id="columna3" class="button expand" href="">WEB 3</a>
    </div>
    <div class="large-4 large-offset-2 center columns">
      <a id="columna4" class="button expand" href="">WEB 4</a>
    </div>  
    <div class="large-4 center columns end">
      <a id="columna5" class="button expand" href="">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.

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.">WEB 1</a>
    </div>
    <div class="large-4 center columns">
      <a id="column2" class="button expand" href="http://www.page2.">WEB 2</a>
    </div>
    <div class="large-4 center columns">
      <a id="columna3" class="button expand" href="http://www.page3.">WEB 3</a>
    </div>
    <div class="large-4 large-offset-2 center columns">
      <a id="columna4" class="button expand" href="http://www.page4.">WEB 4</a>
    </div>  
    <div class="large-4 center columns end">
      <a id="columna5" class="button expand" href="http://www.page5.">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.

Share Improve this question edited Apr 11, 2014 at 15:23 Milan and Friends 5,6101 gold badge22 silver badges28 bronze badges asked Apr 11, 2014 at 15:17 Adrian Halaburda 501 gold badge2 silver badges8 bronze badges

Add a ment |

5 Answers 5

Sorted by: Reset to default 1

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

http://jsfiddle/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.">WEB 1</a>
        </div>
        <div class="large-4 center columns">
          <a id="column2" class="button expand" data-bg="http://www.psdgraphics./file/abstract-background.jpg" href="http://www.page2.">WEB 2</a>
        </div>
        <div class="large-4 center columns">
          <a id="columna3" class="button expand" data-bg="http://wallpapergrab./wp-content/uploads/2014/03/start-3d-background-wallpapers.jpg" href="http://www.page3.">WEB 3</a>
        </div>
        <div class="large-4 large-offset-2 center columns">
          <a id="columna4" class="button expand" data-bg="http://sciencelakes./data_images/out/26/8856597-daisies-green-background.jpg" href="http://www.page4.">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.">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);
        });
    }
});

Use a absolute element and add background to it. Do it like this:

<body>
<div id="bg"></div>

And styles:

#bg {
position: fixed;
background: url(xyz.);
width: 100%;
height: 100%;
top:0;
left:0;
z-index:-1; /* to place it behind body elements */
}

And follow your same trick. :D

CSS3 is the easiest way. You just have to reassign the image in JavaScript as you already have, then putting this in the body tag will take care of the rest for you. Be sure to play with the timing to meet your needs. Disclaimer: this transition doesn't work in IE earlier than 10.

body {
   transition: background .5s ease-in-out;
   -moz-transition: background .5s ease-in-out;
   -webkit-transition: background .5s ease-in-out;
}

Unfortunately, this is not currently possible with "simple" CSS.

However, you could use a container (your web page) with position: relative and place your main div in it, with position: absolute and top: 0; left: 0. then add, at the same level as this div:

<img src="img/dib1.jpg" class="bg-img active" />
<img src="img/dib2.jpg" class="bg-img" />
<img src="img/dib3.jpg" class="bg-img" /> 
<img src="img/dib4.jpg" class="bg-img" />
<img src="img/dib5.jpg" class="bg-img" />

In your CSS :

img.bg-img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 500ms ease-out; /* could be another duration / transition effect */
  -webkit-transition: opacity 500ms ease-out;
  -moz-transition: opacity 500ms ease-out;
  -ms-transition: opacity 500ms ease-out;
  -o-transition: opacity 500ms ease-out;
}

img.bg-img.active {
  opacity: 1;
}

Then in your code, instead of changing the background-image property of "body", change the class of the desired images et add / remove active.

You can use CSS 3 transition property. Define class in your style sheet for example as follows:

.backgroundChanged
{
    background-image: your image;
    transition-property:background-image;
    transition-duration: 0.3s;
    transition-timing-function: linear;
}

And then apply this class programmatically in javascript when you need. Hope this helps.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How can I make a fade transition with the background images - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)