CODEWITHSUNDEEP
javascriptjquerycss
StinkyTofu
StinkyTofu

Reputation: 223

Animate background-color on mouseenter event

I'm trying to have it so that when the mouse enters the .container elements the background-color of #facial element slowly transitions to white from blue.

I've read that you have to use jQuery's .animate() function to achieve this.

It doesn't seem to work. I've read on the forums you need something called JQuery UI, but those posts were older. I also do not see this option within my JsFiddle. Anybody know why this script is not working? 

$(document).ready(function(){

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

JsFiddle Link

Upvotes: 0

Views: 245

Answers (3)

StinkyTofu
StinkyTofu

Reputation: 223

Got it working using CSS. The project started as an actual Jquery project, but ended up being completed with pure CSS. Thanks guys! Here are the results. 

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

Results!

Upvotes: 0

AtheistP3ace
AtheistP3ace

Reputation: 9691

Color animations need jQuery UI which extends the animate method.

https://jqueryui.com/animate/

In fact to animate the background-color with jquery you need the Color plugin.

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

Fiddle: 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);


    });
});

Also as a heads up when you include jQuery in jsfiddle it automatically includes jqueryui as well.

Upvotes: 0

guest271314
guest271314

Reputation: 1

Try utilizing css :hover , existing transition property set to 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/

Upvotes: 1

Related Questions