jQuery Wont動畫

Question

我有一個元素，我試圖用頁面滾動時使用jQuery動畫。我試圖讓元素的背景顏色從透明變爲黑色。我一直在嘗試不同的方法來完成這個問題，但他們都沒有工作。請幫忙。

$(window).scroll(function() { 
 
    if ($(window).scrollTop() >= 100) { 
 
    $("#heading").animate({ 
 
     backgroundColor: "rgb(10,22,18,0)" 
 
    }, "slow"); 
 
    } else { 
 
    $("#heading").animate({ 
 
     backgroundColor: "rgb(10,22,18,1)" 
 
    }, "slow"); 
 
    } 
 
});

#heading { 
 
    z-index: 2; 
 
    position: fixed; 
 
    height: 30px; 
 
    border: none; 
 
    background-color: rgb(10, 22, 18, 0); 
 
} 
 

 
.head { 
 
    display: inline; 
 
    float: left; 
 
    opacity: 1.0; 
 
} 
 

 
.head2 { 
 
    height: 30px; 
 
    width: auto; 
 
    padding-left: 5px; 
 
    padding-right: 5px; 
 
    text-align: center; 
 
    text-shadow: 1px 1px 3px #666666; 
 
    color: rgb(255, 255, 255); 
 
    font-size: 15px; 
 
    text-decoration: none; 
 
    border: none; 
 
    background: none; 
 
} 
 

 
.head2:hover { 
 
    color: rgb(255, 255, 255); 
 
    text-decoration: none; 
 
    background-color: rgb(0, 0, 0); 
 
} 
 

 
.font { 
 
    font-family: 'Raleway', sans-serif; 
 
    font-style: normal; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="heading"> 
 
    <img class="head" id="mainImg" src="Images/logo.png" alt="Know Music"> 
 
    <button class="head head2 font" href="" id="hb1">Guitar</button> 
 
    <button class="head head2 font" href="" id="hb2">Bass</button> 
 
    <button class="head head2 font" href="" id="hb3">Piano</button> 
 
    <button class="head head2 font" href="" id="hb4">Drums</button> 
 
</div>

Answer 1

我加了一個條件，在JS添加類一旦大於100和刪除類時，其低於。我試過toggleClass，但是閃爍。我在css上添加了.change類以用於背景顏色更改，並添加了對#heading ID的轉換。 JSFiddle除非使用插件，否則不能使用jQuery中的animate函數爲backgroundColor製作動畫。見jQuery animate docs

$(window).scroll(function() { 
 
    if ($(window).scrollTop() >= 100) { 
 
    $("#heading").addClass(" change"); 
 
    } else{ 
 
    $("#heading").removeClass(" change"); 
 
    } 
 
});

html,body{height:3000px;} 
 
#heading { 
 
    z-index: 2; 
 
    position: fixed; 
 
    height: 30px; 
 
    border: none; 
 
    background-color: rgb(10, 22, 18, 0); 
 
    transition: 0.5s ease-in-out all; 
 
} 
 

 
.head { 
 
    display: inline; 
 
    float: left; 
 
    opacity: 1.0; 
 
} 
 

 
.head2 { 
 
    height: 30px; 
 
    width: auto; 
 
    padding-left: 5px; 
 
    padding-right: 5px; 
 
    text-align: center; 
 
    text-shadow: 1px 1px 3px #666666; 
 
    color: rgb(255, 255, 255); 
 
    font-size: 15px; 
 
    text-decoration: none; 
 
    border: none; 
 
    background: none; 
 
} 
 

 
.head2:hover { 
 
    color: rgb(255, 255, 255); 
 
    text-decoration: none; 
 
    background-color: rgb(0, 0, 0); 
 
} 
 

 
.font { 
 
    font-family: 'Raleway', sans-serif; 
 
    font-style: normal; 
 
} 
 

 

 
.change{ 
 
    background-color: rgba(10,22,18,1); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="heading"> 
 
    <img class="head" id="mainImg" src="https://placehold.it/50x50" alt="Know Music"> 
 
    <button class="head head2 font" href="" id="hb1">Guitar</button> 
 
    <button class="head head2 font" href="" id="hb2">Bass</button> 
 
    <button class="head head2 font" href="" id="hb3">Piano</button> 
 
    <button class="head head2 font" href="" id="hb4">Drums</button> 
 
</div>

Answer 2

試試這個

$(window).scroll(function(){ 
if($(this).scrollTop()>= 100){ 
    // animate 
}else{ 
    // animate 
} 
});