CODEWITHSUNDEEP
javascriptjqueryanimationjquery-animate
user5880775
user5880775

Reputation:

jQuery animate change opacity ONLY during animation

I have this jquery command:

$('html, body').animate({
                        scrollTop: stopY,
                        opacity: '0.5'
                        }, 1000);

(where stopY is the position where I want to stop). The only think is that I would like the opacity changes to 0.5 only during the scrolling and, once I'm in stopY position it goes back to 1.

Upvotes: 0

Views: 304

Answers (3)

guest271314
guest271314

Reputation: 1

You can use start option of .animate() to set target element opacity to 0 ; .promise() , .then() ; call .animate() on target element at .then() to set opacity to 1

var stopY = 400, div = $("div");

$("html, body").animate({
  scrollTop: stopY
}, {
  duration: 1000,
  start: function() {
    div.css("opacity", 0)
  }
}).promise().then(function() {
  div.animate({
    opacity: 1
  }, 500)
})
body {
  height: 800px;
}
div {
  position: relative;
  top: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

<body>
  <div>scroll to here</div>
</body>

Upvotes: 1

apokryfos
apokryfos

Reputation: 40730

Your current code is animating the opacity as well as the scrollTop. What you need to do is:

$("body").css("opacity",0.5);
$('html, body').animate({
          scrollTop: stopY
}, 1000, function () { 
    if ($(this).is("body")) { //Done is triggered for both html and body, so we limit it to only one of the two triggers
       $("body").css("opacity",1);
    }
});

Upvotes: 0

jonny
jonny

Reputation: 3098

Supply a complete callback in the animate's options parameter, which sets the opacity back to 1 upon completion of the animation:

var options = {
    duration: 1000, 
    complete: function(){ $('html, body').css('opacity', 1) }
});

$('html, body').css('opacity', 0.5).animate({ scrollTop: stopY }, options)

Upvotes: 1

Related Questions