Ich habe diesen Befehl jquery:jQuery animieren Änderung Opazität NUR während der Animation
$('html, body').animate({
scrollTop: stopY,
opacity: '0.5'
}, 1000);
(wo Stopy ist die Position, wo ich aufhören wollen). Die einzige denken, ist, dass ich während der Scrollen die Opazität Änderungen auf 0,5 nur und möchte, wenn ich in Stopy Position bin geht es zurück zum 1.
Versorgung einen complete Rückruf in der animate ‚s Optionen Parameter, die setzt die Opazität nach Abschluss der Animation zu 1 zurück:
var options = {
duration: 1000,
complete: function(){ $('html, body').css('opacity', 1) }
});
$('html, body').css('opacity', 0.5).animate({ scrollTop: stopY }, options)
Ihre aktuellen Code, um die Opazität sowie die scrollTop belebt. Was Sie tun müssen, ist:
$("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);
}
});
Sie start Möglichkeit .animate() verwenden können Zielelement opacity-0 zu setzen; .promise(), .then(); nennen .animate() auf Zielelement bei .then()opacity zu 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>