Member Avatar for GlenRogers

I've been using thisJQuery code to fade in divs (all of the same class .showme)
But what I would like to do is fade out the previous div as the next one fades in.
Can anyone offer assistance on this?

    $(document).ready(function() {
       /* Every time the window is scrolled ... */
       $(window).scroll( function(){
         /* Check the location of each desired element */
         $('.showme').each( function(i){
           var middle_of_object = $(this).position().top + $(this).outerHeight() / 2;
           var middle_of_window = $(window).scrollTop() + $(window).height() /2;
           /* If the object is completely visible in the window, fade it it */
          if( middle_of_window >= middle_of_object ){
            $(this).animate({'opacity':'1'},2000);
          }
         }); 
       });
     });
  • 3 Contributors
  • 3 Replies
  • 272 Views
  • 22 Hours Discussion Span
  • Latest Post Latest Post by GlenRogers

Recommended Answers

All 3 Replies

Member Avatar for AleMonteiro

Maybe a simple logic like this could resolve your problem:

    // $currentVisible will hold the current visible element 
    var $currentVisible = undefined;

    $(document).ready(function() {
       /* Every time the window is scrolled ... */
       $(window).scroll( function(){
         /* Check the location of each desired element */
         $('.showme').each( function(i){
             var $this = $(this),
                 middle_of_object = $this.position().top + $this.outerHeight() / 2,
                 middle_of_window = $(window).scrollTop() + $(window).height() /2;

           /* If the object is completely visible in the window, fade it in */
          if( middle_of_window >= middle_of_object ){

              /* If there is a visible element, fade it out */
              if ( $currentVisible !== undefined ) {
                  $currentVisible.animate({'opacity':'0'},2000);
              }

              $this.animate({'opacity':'1'},2000);
              /* Set the current visible as the  one being fade in*/
              $currentVisible = $this;
          }
         }); 
       });

       /* for the first scroll to work properly, you need to set the $currentVisible as the first div */
       $currentVisible = $("#myFirstDiv");

     });

Not tested ^^

Member Avatar for almostbob

does not work as expected on any display but yours

scrolling through a huge blank column on my laptop?? which just happens to be 1 pixel too short to display any div onscreen,

Member Avatar for GlenRogers

Ive used your code and it is fading out. But as every div is of the same class it alo fading out the one that has just faded in!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.