Javascript Jquery颜色变化缓慢

有没有办法慢慢改变我的div容器的颜色。当我将光标移动到细节文本上时，有一个mousehover方法可以将容器的颜色更改为黑色，但我需要稍微慢一点。有没有办法减缓过渡的速度。这是我的

免责声明

条纹袋
14美元
售价25美元
详细信息*
了解更多

在div上应用css3转换属性

检查此链接：

请在您的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");
 });

---

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代码

示例JS小提琴

---

您可以使用jquery和jquery UI实现这一点

代码：

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

});

---

小提琴手：

检查你可能需要在这上面再加一个div

检查此代码

---

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

您必须将

css转换

添加到

中。悬停

类，您不能将

显示：无

添加到

中。

悬停后的免责声明

我更改了你的代码，你可以在屏幕上看到

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;
}

$(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);
}

JQUERY:

#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;
}

$(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);
}

$（文档）.ready（函数（）{
横幅化（）；
});
函数bannerAnimation（）{
//Jquery动画
$（“#图像_汽车”）。设置动画({
左：“100”
}, 500 
，函数（）{
$（“#图像_汽车”）。设置动画({
左：“50”
}, 200); 
} 
);
};
$（“#headline1text”）.css（'color'，'red'）；
//$（“#headline1text”）.html（“新文本”）.fadeIn（“慢”）；
$（“#headline1text”）.fadeIn（3000）；
setTimeout（函数（）{
$（“#headline2text”）.animate（{左：“20”}，500，函数（）{
$（“#headline3text”）.animate（{左：“20”}，500，函数（）{
$（“#headline3text”）.animate（{左：“10”}，200）；
});
$（“#headline2text”）.animate（{左：“10”}，200）；
$（'#fadeIn'）。文本（“”）；
按钮效应（）；
});
}, 1000);
$（“#免责声明”）。悬停(
函数（）{
$（'包装器'）.addClass（'悬停'）；
}，函数（）{
$（'包装器'）.removeClass（'悬停'）；
}
);
功能按钮_效果（）
{  
var string=“了解更多”；
var q=jQuery.map（string.split（“”），函数（字母）{
返回$（''+字母+''）；
});
var dest=$（'fadeIn'）；
var c=0；
变量i=设置间隔（函数（）{
q[c].appendTo（dest.hide（）.fadeIn（200）；
c+=1；
如果（c>=q.length）净间隔（i）；
}, 30);
}

---

但我认为最好使用css

：悬停

选择器来执行该操作

如果您的问题是“有没有办法慢慢更改我的div容器的颜色”&“有没有办法减慢转换速度”，那么答案是肯定的，有一种方法。检查这个：为元素位置制作不同的css-这不是很顺利。我更愿意使用jquery颜色插件：请分享一些示例或代码，这样如果链接不可用，那么用户也会发现这篇文章很有用，jquery UI，当然，jquery本身对于颜色动画是不够的。