sırasında bu Jquery komutu: JQuery animasyon değiştirme opaklık sadece canlandırma
$('html, body').animate({
scrollTop: stopY,
opacity: '0.5'
}, 1000);
Arz geri animate 'ın seçenekler parametresinde bir complete geri arama, gider, sadece kaydırma sırasında 0,5 donukluk değişiklikleri yapmak ve olacağını hangi animasyon tamamlandıktan sonra geri 1 opaklık ayarlar:
var options = {
duration: 1000,
complete: function(){ $('html, body').css('opacity', 1) }
});
$('html, body').css('opacity', 0.5).animate({ scrollTop: stopY }, options)
geçerli kod donukluk olarak scrollTop animasyon edilir. Ne yapmanız gereken ise:
$("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);
}
});
Sen 0 hedef elemanı opacity ayarlamak için .animate() arasında start seçeneğini kullanabilirsiniz; .promise(), .then(); opacity1 için
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>.then() de hedef elemanı üzerinde
.animate() çağrı