在鼠標事件中動畫背景顏色

我試圖讓它在鼠標進入.container元素時background-color的#facial元素緩慢地從藍色變爲白色。在鼠標事件中動畫背景顏色

我讀過，你必須使用jQuery的.animate()函數來實現這一點。

它似乎沒有工作。我在論壇上閱讀過你需要的東西，叫做JQuery UI，但是那些帖子比較老。我也沒有看到我的JsFiddle中的這個選項。有人知道爲什麼這個腳本不工作？

$(document).ready(function(){ 

$('.container').mouseenter(function(){ 
    $('#facial').animate({backgroundColor:'#ffffff'},'slow'); 
    }); 
});

JsFiddle Link

來源

2015-11-05 StinkyTofu

'背景color'不能設置動畫屬性（見動畫的屬性列表在這裏：http://www.w3schools.com/jquery/eff_animate.asp）。你確實需要jQuery UI庫或插件：http://stackoverflow.com/questions/13461984/jquery-animate-not-working-with-colors ...或者你可以嘗試CSS轉換。 –

謝謝你們。我將僅使用CSS轉換。 – StinkyTofu

嘗試利用css:hover，現有transition屬性設置爲8.5s

#test_box { 
 
    height: 50px; 
 
    width: 50px; 
 
    background: red; 
 
    transition: background 2s ease; 
 
} 
 
#test_box:hover { 
 
    background: green; 
 
} 
 
body { 
 
    background-color: #d6d6d6; 
 
} 
 
.container { 
 
    margin: 200px auto; 
 
    background-color: red; 
 
    width: 478px; 
 
    height: 200px; 
 
} 
 
#facial { 
 
    float: right; 
 
    width: 239px; 
 
    height: 200px; 
 
    background: #008aaf; 
 
    transition: background 8.5s ease; 
 
} 
 
#facial h1, 
 
#facial h2 { 
 
    text-align: center; 
 
    margin-top: 30px; 
 
    color: #FFFFFF; 
 
} 
 
.container:hover > #facial { 
 
    background: #fff; 
 
}

<div class="container"> 
 
    <img src="http://s23.postimg.org/enn2yyh7v/Facial.jpg" /> 
 
    <div id="facial"> 
 
    <h1>Facial</h1> 
 
    <h2>Marketing Material</h2> 
 
    </div> 
 

 
    <div id="test_box">...</div> 
 
</div>

的jsfiddle http://jsfiddle.net/b008nczk/32/

來源

2015-11-05 21:05:04 guest271314

謝謝。這確實有道理。所以我應該在我的CSS中做任何背景色轉換，並在Jquery中完全避免它？ – StinkyTofu

彩色動畫需要延伸的動畫的方法的jQuery UI。

https://jqueryui.com/animate/

其實與jQuery動畫的背景顏色，你需要的顏色插件。

https://github.com/jquery/jquery-color

小提琴：https://jsfiddle.net/b008nczk/34/

$(document).ready(function() { 
    //1.1 On hover the background of #facial will turn white 
    $('.container').mouseenter(function() { 
     $('#facial').animate({ 
      'background-color': '#ffffff' 
     }, 1000); 


    }); 
});

另外，作爲一個頭，當你包括jQuery的中的jsfiddle它會自動包括jQueryUI的爲好。

來源

2015-11-05 21:01:35 AtheistP3ace

感謝您的建議。似乎仍然工作，當我點擊你的JsFiddle鏈接。另外如果這是真的不應該在我的JsFiddle中工作？ – StinkyTofu

@StinkyTofu在我的小提琴中，如果你看看外部資源，我添加了jquery color插件。 Jqueryui擴展了動畫功能以處理顏色。該顏色插件擴展了jquery ui動畫擴展以使用背景顏色。 – AtheistP3ace

得到它的工作使用CSS。該項目作爲一個實際的Jquery項目開始，但最終以純CSS完成。多謝你們！結果如下。

.container:hover > #facial { 
    background: #fff; 
}

Results!

來源

2015-11-05 23:37:29 StinkyTofu

在鼠標事件中動畫背景顏色

回答

相關問題