fadeIn() effect in Javascript/JQuery

Question

I am a beginner in javascript. I want you scroll through the pages in a specific place appeared in the text. I try to do this using fadeIn (), but does not go to me. Browser do not see any effect. I would be very grateful for an explanation.

 <div id="about_content">
        <p id="randomText">Lorem ipsum dolor sit amet, ...</p>
 </div>



<script>
    $(document).ready(function() {
        $(".randomText").fadeIn('slow');
    );

</script>

#about_content{
box-sizing: border-box;
width: 70vw;
height:50vh;
background-color: pink;
margin: 0 auto;
position:relative;
top:25vh;
padding:20px;
   }

#randomText {

font-size:1.5em;

 }

Your question is difficult to understand, are you trying to have the fade in occur when the user scrolls to a certain point in the page? — theaccordance, May 23 '16 at 17:13
Besides you using the wrong selector, `fadeIn` will only fade in an element that is not currently visible: eg `display:none` — Patrick Evans, May 23 '16 at 17:20
Yes, exactly when the user scroll to the place where the text is — mati, May 23 '16 at 17:21

score 0 · Answer 1 · answered May 23 '16 at 17:18

0

function testScroll(ev){
    if(window.pageYOffset>400){
        $('#randomText').fadeIn('slow');
    }
}
window.onscroll=testScroll

Instead you can use jQuery's Scroll http://api.jquery.com/scroll/

answered May 23 '16 at 17:18

imrealashu

5,089
4
16
28

It still does not work. I do not know why, it looks like that my browser does not support JQuery... – mati May 23 '16 at 17:30
which browser and which version you're using ? – imrealashu May 23 '16 at 17:31
Chrome 50.0.2661.102 m Firefox 46.0.1 – mati May 23 '16 at 17:33
open console and type `$` see what you're getting. if it returns something your browser probably supporting jQuery else it will return `$ undefinded`. – imrealashu May 23 '16 at 17:34
in console check your network tab if the jQuery.js file is included properly. – imrealashu May 23 '16 at 17:35
It seems that all is well. – mati May 23 '16 at 17:41
just make sure you're not including your `script` file before `jQuery`. – imrealashu May 23 '16 at 17:43
Can you specific how the code is not working? Since the condition is set to `window.pageYOffset >400`, so the fade in animation of element will only be fired when the y offset is greater is 400. Try to add a `console.log('test')` before the if and open the console to see if `test` is output. – Calvin Lau May 23 '16 at 17:57
I tried to use a different script and it worked. Just the code you provided above does not work. I do not understand this.. – mati May 23 '16 at 18:06
ok I solved this. I added in the head instead of and everything is OK now. Thanks for you effort – mati May 23 '16 at 18:23

score 0 · Answer 2 · edited May 23 '17 at 12:31

Your code seems to be a bit messy. I believe your want to embed your CSS inside the HTML, but you should enclose the CSS inside a <style> tag.

And back to you question, the reason why the fadeIn() does not work is that you are using the wrong selector and you are not hiding the element at first load. $(".randomText") select the element with class name randomText but in your HTML code <p id="randomText">... randomText is the id. On the other hand, you should also add CSS property display: none to the #randomText element.

Second, you want to fade in only when user scroll to the text, so you will have to bind the scroll event to a listener. And in the listener you determine if it has reached the text element. If yes then it should fade in the text. Reference: Trigger event when user scroll to specific element - with jQuery

So a fix will be changing the JavaScript to

$(document).ready(function() {
    $(window).scroll(function() {
        var el = $('#randomText');
        if ($(this).scrollTop() > el.offset().top+el.outerHeight()-$(this).height()) {
            $('#randomText').fadeIn('slow');
        }
    });
});

and in your CSS add:

#randomText {
    display: none;
}

JSFiddle: https://jsfiddle.net/vnyth81e/

@MateuszGorzelak One of the possible causes is that `$('#randomText')` cannot query the element. Is it possible for you to copy the whole file content to [JSFiddle](https://jsfiddle.net/) and/or update your question for me to have a look? — Calvin Lau, May 23 '16 at 18:04

fadeIn() effect in Javascript/JQuery

2 Answers2