jQueryアニメーションがありません

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

を試してみて、私はそれが100より大きくなると、クラスを追加したときにそのことを下回るクラスを削除するJSに条件を追加しました。私はトグルクラスを試みましたが、それはちらついていました。私は背景色の変更のために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 
} 
});