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选择器更好

Answer 2

在div上应用css3过渡属性。

点击此链接：http://css-tricks.com/almanac/properties/t/transition/

请在你的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;

}

并将此代码应用到您的js

中

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

Answer 3

CSS类

.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>

示例JS FIddle Sample

Answer 4

您可以使用jquery和jquery UI实现此目的。

代码：

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

});

小提琴：http://jsfiddle.net/w9LHU/

Answer 5

检查您可能需要另一个div

检查此代码http://jsfiddle.net/veDY6/76/

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

并将css作为背景黑色并在悬停时管理其不透明度

Jquery颜色变化缓慢

5 个答案: