问题描述:

I have a very long html page, with a lot of things.

I want that an image in a div appears when user scroll down the page and reach the div.

The appartition will be managed whith the css property transition:opacity

But I don't understand how to trigger the effect.

网友答案:

exemple

CSS

.imageToAppear{display:none;opacity:0}

HTML

<div id="wantedonscroll"></div>
<div id="imageToAppear"><img src="/01.png"></div>

JQUERY

$( "#wantedonscroll" ).scroll(function() {
 $("#imageToAppear").fadeIn();
});

you can costumize the fade in event here is documentation Jquery Fadein

网友答案:

thank your for your answer :)

But it just don't work in my html page...

this is my file:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style type="text/css">
#imageToAppear{display:none;opacity:0}
</style>
</head>

<body>
<div>
<p>Lorem ispum .... and a lot of things in order to have something to scroll</p>
</div>
<div id="wantedonscroll"></div>
<div id="imageToAppear"><img src="test.png"></div>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("#wantedonscroll").scroll(function() {
 $("#imageToAppear").fadeIn();
});
</script>
</body>
</html>

what is wrong with it?

相关阅读:
Top