Animate one Div when the mouse hovers over another(当鼠标悬停在另一个 Div 上时为一个 Div 设置动画)
问题描述
I'm looking to animate one div when the mouse hovers over another div tag elsewhere on the page. As an example...
CSS
#blue-box {
position:absolute;
margin-left:50px;
margin-top:50px;
height:100px;
width:100px;
background-color:blue;
}
#red-box {
position:absolute;
margin-left:180px;
margin-top:50px;
height:100px;
width:100px;
background-color:red;
}
HTML
<div id="blue-box"></div>
<div id="red-box"></div>
JavaScript
$(document).ready(function(){
$('#red-box').animate({'margin-top': '200px'}, 1500);
});
I've also made a jsFiddle to help.
How would I get the animation to trigger on the red box, whenever the mouse hovers over the blue box? And reverse the animation when the mouse is moved away from the blue box? Returning the red box to it's starting position.
Could anyone help me?
This should do the trick:
$(document).ready(function(){
$("#blue-box").hover(function(){
$('#red-box').stop().animate({'margin-top': '200px'}, 1500);
}, function(){
$('#red-box').stop().animate({'margin-top': '50px'}, 1500);
});
});
It should be noted that this can be done easier with CSS, in case the DOM order of the elements are given, but that solution is not flexible if we separate the DOM elements.
这篇关于当鼠标悬停在另一个 Div 上时为一个 Div 设置动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:当鼠标悬停在另一个 Div 上时为一个 Div 设置动画
基础教程推荐
- 有没有办法使用OpenLayers更改OpenStreetMap中某些要素 2022-09-06
- 在for循环中使用setTimeout 2022-01-01
- 角度Apollo设置WatchQuery结果为可用变量 2022-01-01
- 我什么时候应该在导入时使用方括号 2022-01-01
- 悬停时滑动输入并停留几秒钟 2022-01-01
- 响应更改 div 大小保持纵横比 2022-01-01
- Karma-Jasmine:如何正确监视 Modal? 2022-01-01
- 当用户滚动离开时如何暂停 youtube 嵌入 2022-01-01
- 在 JS 中获取客户端时区(不是 GMT 偏移量) 2022-01-01
- 动态更新多个选择框 2022-01-01