FadeIn Scroll?

JavaScript
1

I’m using this code and cannot seem to get my ‘Our Missions & Vision’ icons to fade in while scrolling. Currently they are not visible because of the “opacity: 0” applied.

Using this script:

$(document).ready(function() {

/* Every time the window is scrolled ... */
$(window).scroll( function(){
<img src="/community/uploads/default/21128/1d0e86147b31643b.PNG" width="690" height="309"> 
    /* Check the location of each desired element */
    $('.hideme').each( function(i){
        
        var bottom_of_object = $(this).position().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();
        
        /* If the object is completely visible in the window, fade it it */
        if( bottom_of_window > bottom_of_object ){
            
            $(this).animate({'opacity':'1'},500);
                
        }
        
    }); 

});

});

and using jQuery v1.11.1. Am I missing something? It seems that the icons are hidden by the CSS and the script is suppose to activate the icons to appear, but it’s not happening.

2

Is that your actual code? The image code needs to be in the HTML rather than inside the script.

1 Like
3

I’m not sure where the <img…> came from as it’s not part of the code that I’m using at http://jsfiddle.net/tcloninger/e5qaD/.

The idea of the code I’m using form there is:

$(document).ready(function() {
    
    /* Every time the window is scrolled ... */
    $(window).scroll( function(){
    
        /* Check the location of each desired element */
        $('.miss div').each( function(i){
            
            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            
            /* If the object is completely visible in the window, fade it it */
            if( bottom_of_window > bottom_of_object ){
                
                $(this).animate({'opacity':'1'},500);
                    
            }
            
        }); 
    
    });
    
});

The idea is that each <div> under <div class="row miss"> would fade in as the page is scrolled.

EDIT
This post has been reformatted by enclosing the code block in 3 backticks
```
on their own lines.

4

It’s working for me in Chrome.

5

On my system (Windows 7/Chrome/Firefox) it’s just blank.

6

Have you tried refreshing your cache - if it is working for others but not for you then you probably have an old copy cached

7

Yes, I’ve done that in all of my browsers. So I don’t know. I’m trying a new code now and I’m still not getting the results I want. So that tells me there is either a jQuery conflict somewhere (like I’m loading more than one instance of jQuery), or there’s a conflict somewhere else or ALL of my browsers are running in a quirky mode. What’s even more interesting is that when I viewed this site in Browserstack, it did not display a fadeIn either.

Interesting how you were able to see it, but not I. This is now the third piece of code that I tried and am not able to see a fadeIn with a scroll.

Not sure what to do next.

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.