我正在尝试悬停边框动画。但我没有动画,
这是我的代码。你能帮我么。
$(".divBox1").mouseover(function(){
console.log('enter');
$(this).animate({border: "3px solid #000"}, 100);
}).mouseout(function(){
console.log('out');
$(this).animate({border: "3px solid #FFF55B"}, 100);
});
答案 0 :(得分:3)
试试这个,在边框属性中添加引号
$(".divBox1").mouseover(function(){
//console.log('enter');
$(this).animate({"border": "3px solid #000"}, 100);
}).mouseout(function(){
//console.log('out');
$(this).animate({"border": "3px solid #FFF55B"}, 100);
});
答案 1 :(得分:1)
尝试用双引号括起css边框属性
答案 2 :(得分:0)
尝试使用css轻松
.divBox1{
border: 3px solid #FFF55B;
}
.divBox1:hover {
border: 3px solid #000;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
答案 3 :(得分:0)
答案 4 :(得分:0)
您必须jQuery
和jQuery ui
使用animating colors
。因为您的代码建议使用you just want to animate colors not the width
,所以可以使用
borderWidth: '3px'
.divBox1 {
border:solid 3px #FFF55B;
}
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script>
$(function(){
$(".divBox1").mouseover(function () {
$(this).animate({borderColor: "#000"}, 800);
}).mouseout(function () {
$(this).animate({borderColor: "#FFF55B"}, 800);
});
});
</script>
如果没有jquery ui
,这根本不起作用。
答案 5 :(得分:0)
是this你想要的是什么?
$(".divBox1").css("border","3px solid transparent").mouseover(function(){
//console.log('enter');
$(this).animate({"border-color": '#000'}, 100);
}).mouseout(function(){
//console.log('out');
$(this).animate({"border-color": "#FFF55B"}, 100);
});
你需要jQuery UI