在JQuery中更改顏色

我可以在JQuery中使用CSS來緩慢更改div的顏色嗎？哦，還有一件事，我怎樣才能給我的<div>添加第二個功能。這是代碼。我想在發生mouseout時將顏色改回原來的顏色。在JQuery中更改顏色

<script> 
    function myFunction() { 
     $(document).ready(function() { 
      $("#square").css({ backgroundColor: 'blue' }); 

     }); 

    } 
</script> 

<div id="square" onmouseover="return myFunction()">Focus on me!</div>

來源

2015-07-02 Altay Mazlum

http://stackoverflow.com/questions/6950988/jquery-change-css-attribute-slowly – Shivam

爲了使它慢，給transition並刪除document.ready因爲你的東西沒有負載稱之爲：

#square {transition: 1s all linear;}

跨瀏覽器支持

-webkit-transition: all 1s linear; 
-moz-transition: all 1s linear; 
-o-transition: all 1s linear; 
transition: all 1s linear;

片段

$(document).ready(function() { 
 
    $("#square").hover(function() { 
 
    $(this).css("backgroundColor", 'blue'); 
 
    }, function() { 
 
    $(this).css("backgroundColor", ''); 
 
    }); 
 
});

#square {width: 100px; height: 100px; transition: 1s all linear;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="square"></div>

來源

2015-07-02 08:25:38

謝謝，它解決了我的問題:) –

@AltayMazlum我也添加了一個片段！一探究竟。 –

太棒了！我也會用那個。 –

您可以使用.animate()來設定延遲的CSS效果：

$("#square").animate({backgroundColor: 'blue'}, 500});

來源

2015-07-02 08:25:28

怎麼樣慢慢的問題？ –

您將需要jQuery UI來動畫顏色。 –

注： jQuery的UI的項目通過允許一些非數字風格，如顏色，以延伸.animate（）方法動畫。該項目還包括通過CSS類指定動畫而不是單獨屬性的機制。

使用.animate：

<script> 
    function myFunction() { 
     $(document).ready(function() { 
      $("#square").animate({ 
       backgroundColor: 'blue' 
      }, 500); 

     }); 

    } 
</script>

在這種情況下的過渡是500毫秒。

來源

2015-07-02 08:25:41 KittMedia

我認爲這將需要jQuery UI .. –

不，你不需要。 http://api.jquery.com/animate/ – KittMedia

是的，動畫功能是在jQuery中，但動畫顏色，我認爲你需要jQuery UI –

這個CSS規則結合您的代碼

#square { 
    transition: 1s ease background; 
}

來源

2015-07-02 08:26:03

它沒有回答這個問題，因爲問題是關於如何在jQuery中完成的。 – KittMedia

那麼，你可以用CSS做的一切，它不應該與jQuery .. –

是的，這回答了這個問題。爲什麼downvote？ –

在JQuery中更改顏色

回答

相關問題