CSS边框悬停动画
css border hover animations
我正在尝试悬停边界动画。但是我没有得到动画,
这是我的代码。你能帮帮我吗?
$(".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);
});
试试这个,给border属性添加引号
$(".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);
});
尝试将css border属性用双引号括起来
用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;
}
你不能像这样为静态边界添加动画。你可以在css3中操作边框图像。
更多查询请参考此链接
还可以看看这个插件
您必须使用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
,这将无法工作。
这是你想要的吗?
$(".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
标题>相关文章:
- jQuery悬停动画只在其他类似元素中的一个元素上
- 如何动画删除悬停后的背景
- 如何在鼠标悬停时停止动画
- jQuery透明图像描述鼠标悬停时的幻灯片动画
- 悬停在动画文本上后,文本淡入淡出不会返回
- 在悬停Jquery/cs3时通过翻转动画更改文本
- 如何在 jquery 中克服此问题以获得动画悬停效果
- 悬停不起作用时对不透明度更改进行动画处理
- 我只想在卡片悬停上悬停动画,而不是在身体上
- 为什么在使用JQuery时,当我悬停时,没有流畅的动画
- 使用 javascript 在鼠标悬停时停止动画
- jQuery mouseout动画仅在第二次悬停后启动
- 用这个jQuery动画菜单悬停超链接
- 如何使用if hasClass条件禁用jQuery mouseleave事件?//悬停动画
- 使用Javascript悬停的CSS动画
- Chrome动画CSS3三维立方体与悬停状态问题
- d3将鼠标悬停在表格上时,制作图表动画
- CSS动画悬停在外
- 拉斐尔饼图动画悬停
- 旋转动画悬停,但同时移动鼠标悬停->取消