Jquery颜色变化缓慢

Question

Is there any way to change color of my div container slowly. When i move my cursor over details text then there is a mousehover method which changes the color of container to black but i need to do it bit slow. Is there any way to slow down the transition. This is my code

<div id="wrapper">
    <div id="mainContainer">
        <p class="copy">Disclaimer.</p>
        <div id="text">
            <img id="Image_Car" src="http://i.share.pho.to/c43dc6d7_o.png" />
        </div>
              <div id="headlineText">
        <p id="headline1Txt" >Striped Bag</p><br />
        <p id="headline2Txt" >$14</p><br />
        <p id="headline3Txt" >Sale $25</p><br />
    </div>
        <div id="Div1">
            <p id="disclaimer">Details*</p>
        </div>
          <div id="ctaBtn">

              <button class="btn btn-primary" type="button"><div id="fadeIn"> Learn More  </div></button>
      </div>
</div>
</div>

Answer 1

you must add css transition to .hovered class and you can't add display:none to #disclaimer after hover it ...

i changed your code, you can see it on JSFIDDLE

CSS:

#wrapper {

    width: 300px;
    height:250px;
    position: absolute;
    top: 2px;
    left: 0px;
}
#Div1 {
    top:143px;
    left:233px;
    width:50px;
    height:10px;
    position: absolute;
}
#mainContainer {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    border:5px solid #BACAE4;
    width:300px;
    height:250px;
    overflow: hidden;
    position: fixed;
}
 #headline1Txt
{ color: transparent;
     top:40px;
      position:absolute;
       overflow: hidden;
    margin:60px 2px;
font-size:26px;line-height: 1.5;
   left:12px;
}   
 #headline2Txt
{
     top:60px;
      position:absolute;
       overflow: hidden;
    margin:60px 2px;
    left: -150px;
     font-size:21px;line-height: 2.0;

}
 #headline3Txt
{
     top:80px;
      position:absolute;
       overflow: hidden;
    margin:60px 2px;
    left: -150px;
     font-size:21px;line-height: 2.0;
}


#Image_Car {
    position:absolute;
    overflow: hidden;
    margin:60px 8px;
    top:-40px;
    left: -120px;
       width:150px;
    height:100px;
}
#ctaBtn{
    top:200px;
    left:11px;
    width:120px;
    height:23px;
    position:absolute;
}
/* new css */
.copy {display: none;color: white; padding: 10px;}
.hovered .copy { display: block; }
.hovered #mainContainer { background: black; border-color: black;}
.hovered #Image_Car { display: none; }
.hovered #ctaBtn {    display: none; }
.hovered #headlineText {     display: none; }
.hovered #disclaimer {     display: none4; }
.hovered #mainContainer{
    -moz-transition-property:background,opacity,display,border-color,background-color;
    -moz-transition-timing-function:ease-in-out;
    -moz-transition-duration:0.4s;
    -webkit-transition-property:background,opacity,display,border-color,background-color;
    -webkit-transition-timing-function:ease-in-out;
    -webkit-transition-duration:0.4s;
    -o-transition-property:background,opacity,display,border-color,background-color;
    -o-transition-timing-function:ease-in-out;
    -o-transition-duration:0.4s;
    transition-property:background,opacity,display,border-color,background-color;
    transition-timing-function:ease-in-out;
    transition-duration:0.4s;
}

JQUERY:

$(document).ready(function () {
     bannerAnimation();
 });

 function bannerAnimation() {
     //Jquery Animation
     $("#Image_Car").animate({
         left: "100"
     }, 500 
                             , function () {
         $("#Image_Car").animate({
             left: "50"
         }, 200); 
     } 
      );
 };
$("#headline1Txt").css('color', 'red');
//$("#headline1Txt").html("New Text").fadeIn("slow");
$("#headline1Txt").fadeIn(3000);
    setTimeout(function () {
        $("#headline2Txt").animate({ left: "20" }, 500, function () {
            $("#headline3Txt").animate({ left: "20" }, 500, function () {
                $("#headline3Txt").animate({ left: "10" }, 200);
            });
            $("#headline2Txt").animate({ left: "10" }, 200);
            $('#fadeIn').text("");
            button_effect();
        });
    }, 1000);
 $('#disclaimer').hover(
    function () {
        $('#wrapper').addClass('hovered');
    }, function () {
         $('#wrapper').removeClass('hovered');
    }
);



 function button_effect()
{  
    var string = "Learn More";
    var q = jQuery.map(string.split(''), function (letter) {
        return $('<span>' + letter + '</span>');
    });

    var dest = $('#fadeIn');

    var c = 0;
    var i = setInterval(function () {
        q[c].appendTo(dest).hide().fadeIn(200);
        c += 1;
        if (c >= q.length) clearInterval(i);
    }, 30);
}

but i thinks it's better that use css :hover selector to do that

Answer 2

Apply css3 transition propery on your div.

check this link : http://css-tricks.com/almanac/properties/t/transition/

Please add this is on your css

#wrapper {

width: 300px;
height:250px;
position: absolute;
top: 2px;
left: 0px;
-webkit-transition: background-color 1s ease-out 2s;
-moz-transition: background-color 1s ease-out 2s;
-o-transition: background-color 1s ease-out 2s;
transition: background-color 1s ease-out 2s;

}

and appned this code into your js

$("#headlineText").hover(function(){
     $("#wrapper").css("background-color","#000");
 },function(){
     $("#wrapper").css("background-color","#fff");
 });

Answer 3

CSS Class

.box {
width: 150px;
height: 150px;
background: red;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}

.box:hover {
background-color: green;
cursor: pointer;
}

HTML CODE

<div class="box"></div>

Sample JS FIddle Sample

Answer 4

You can acheive this using jquery and jquery UI.

Code:

$("#disclaimer").hover(function () {
    console.log("hi");
    $("#wrapper").fadeIn("slow").animate({
        backgroundColor: 'black'
    });

});

Fiddle : http://jsfiddle.net/w9LHU/

Answer 5

check you may need another div above this

check this code http://jsfiddle.net/veDY6/76/

    <div id="hidderDiv">
</div>

and give css as background black and manage its opacity on hover