CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-waypoints
Greg
Greg

Reputation: 3063

Issue to fadeout elements with jquery waypoints plugin

as you can see on this jsfiddle I'm trying to fade out elements when they enter viewport, using waypoints plugin. Unfortunately this is not working - nothing fades out. Any idea why? Many thanks

CSS and HTML

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.pre-block {
    background: green;
    width:90%;
    Height: 800px;
    margin-bottom:50px;
}
.block {
    background: red;
    width:90%;
    Height: 200px;
}
.col1, .col2, .col3, .col4 {
    float: left;
    width: 25%;
    background: red;
    text-align: center;
    font-size: 12px;
    color: #fff;
    font-weight: 300;
    height: 24px;
    vertical-align: middle;
    display: table-cell;
}
.c1 {
    background: #253151;
}
.c2 {
    background: #253151;
    border-left: 1px #FFF solid;
}
.c3 {
    background: #253151;
    border-left: 1px #FFF solid;
}
.c4 {
    background: #253151;
    border-left: 1px #FFF solid;
}


<div class="pre-block"></div>
<div class="block">
    <div class="col1 c1">dsqd</div>
    <div class="col2 c2">sdsqdss</div>
    <div class="col3 c3">sdqsdsq</div>
    <div class="col4 c4">sdsqd</div>
</div>
<script src="http://imakewebthings.com/jquery-waypoints/jquery.js">
<script src="http://imakewebthings.com/jquery-waypoints/waypoints.js">

JS

$('.block').waypoint(function() {
   $(".col1").delay(10).fadeOut("slow");
   $(".col2").delay(20).fadeOut("slow");
   $(".col3").delay(30).fadeOut("slow");
   $(".col4").delay(40).fadeOut("slow");
}, { offset: 10 });

Upvotes: 0

Views: 333

Answers (2)

totymedli
totymedli

Reputation: 31108

Live Demo

It works perfectly. I added an alert('ok'); to the function and made the display iframe a bit smaller and I get the expected result:

Expected output

Maybe this offset would be better:

offset: $(window).height()

Upvotes: 1

udit bansal
udit bansal

Reputation: 106

Your provided offset: 10 is not able to reach in fiddle. Increase the offset and all is perfect.

Upvotes: 1

Related Questions