jQuery的滾動動畫div不透明

所以我試圖根據滾動瀏覽器窗口動畫的CSS屬性。下面的代碼工作到目前爲止，但我希望它有一個過渡，而不是從不透明度1突然捕捉到不透明度爲0.5。任何幫助表示讚賞。提前致謝。jQuery的滾動動畫div不透明

$(document).ready(function(){ 
$(window).scroll(function(){ 
    if ($(window).scrollTop() > 50){ 
     $('.header').css('background','rgba(200, 54, 54, 0.5)'); 
    } 
    else if ($(window).scrollTop() < 50){ 
     $('.header').css('background','rgba(200, 54, 54, 1)'); 
    } 
});

}）;

這裏是一個jsfiddle鏈接代碼到目前爲止

來源

2013-06-28 Mike

你可以做

$(window).scroll(function(){ 
    if ($(window).scrollTop() > 50){ 
     $('.header').css('background','rgb(200, 54, 54)').stop().animate({"opacity":".5"},1000) 
    } 
    else if ($(window).scrollTop() < 50){ 
     $('.header').css('background','rgb(200, 54, 54)').stop().animate({"opacity":"1"},1000) 
    } 
});

http://jsfiddle.net/XXjZW/2/

來源

2013-06-28 16:19:22

謝謝。這段代碼和下面的例子很好用，但它帶來了另一個問題。我怎樣才能影響背景不透明度影響頭div內的h1標籤？ – Mike

jQuery UI [http://jsfiddle.net/XXjZW/9/](http://jsfiddle.net/XXjZW/9/） –

您可以使用CSS3屬性transition：

.header{ 
    -webkit-transition:background 1s; 
    -moz-transition:background 1s; 
    -o-transition:background 1s; 
    transition:background 1s; 
}

來源

2013-06-28 16:18:50

給你css過渡 - >

transition:background 1s;

http://jsfiddle.net/XXjZW/6/

來源

2013-06-28 16:23:45

如果你想用瀏覽器的兼容性不支承實CSS3，我會建議你使用jQuery用戶界面庫：

$('.header').animate({ 
     backgroundColor: "#aa0000" 
    }, 1000);

活生生的例子：http://jsfiddle.net/XXjZW/8/

您將需要包含它，因爲您包含jQuery庫：

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

來源

2013-06-28 16:29:05 Alvaro

jQuery的滾動動畫div不透明

回答

相關問題