Javascript Fade In Fade Out

Question

J'essaie d'accomplir quelque chose de si simple que c'est douloureux, mais je n'ai pas encore eu de chance après des heures de travail.

J'ai 4 divs, chacun avec la classe '.slide'. Tout ce que je veux faire est de les rendre invisibles, mais de se fondre quand ils sont dans la fenêtre. Si elles quittent la fenêtre d'affichage, elles doivent retourner à invisible. Des idées?

$('.slide').waypoint(
    function() { 
     if($(this).is(":in-viewport")) { 
      $(this).animate({ 
       opacity: 1 
      }, 100); 
     } 
     $('.slide').not(this).animate({ 
      opacity: 0 
     }, 100); 
    }, 
    { 
     offset: function() { 
      return $.waypoints('viewportHeight') - document.getElementById('navigation').clientHeight; 
     } 
    } 
); 

http://jsfiddle.net/Agdax/3/

Answer 1

donc j'ai joué un peu et obtenu this:

/*jslint browser: true */ 
/*global $ */ 

(function() { 
    'use strict'; 

    var invisibleClassName = 'invisible', 
     scrollWait = 500; 

    function isInvisible(el) { 
     var wh = $(window).height(), 
      wt = $(window).scrollTop(), 
      eh = $(el).height(), 
      et = $(el).offset().top; 
     return ((wh + wt) <= et || wt >= (et + eh)); 
    } 

    function checkVisibleAll(elements) { 
     elements.each(function() { 
      $(this)[(isInvisible(this) ? 'add' : 'remove') + 'Class'](invisibleClassName); 
     }); 
    } 

    $.fn.visible = function() { 
     var elements = this, 
      scrollTimer = null; 

     // Don't check too often 
     function scrolled() { 
      clearTimeout(scrollTimer); 
      scrollTimer = setTimeout(function() { 
       checkVisibleAll(elements); 
      }, scrollWait); 
     } 

     // Onload 
     checkVisibleAll(elements); 

     $(window).bind("scroll resize", scrolled); 
     return this; 
    }; 
}()); 

animation est visible dans les navigateurs modernes.