javascript - jquery颜色变化缓慢

Question

有什么方法可以慢慢改变我的 div 容器的颜色。当我将光标移到详细信息文本上时，有一个鼠标悬停方法可以将容器的颜色更改为黑色，但我需要做的有点慢。有什么办法可以减缓过渡。这是我的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

您必须添加 css transition至 .hovered类，你不能添加 display:none至 #disclaimer在 hover 之后它...

我更改了您的代码，您可以在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);
}

但我认为使用 css 更好 :hover选择器来做到这一点