[英]Scroll over a div and animate another div
I have 1 to 6 divs that are created dynamically. 我有1到6个动态创建的div。 I also have nested divs inside of these that I want to animate when I scroll over the parent div. 我还在其中嵌套了div,当我在父div上滚动时,我想对其进行动画处理。 Right now when I scroll over it animates all the divs, How would I send each one as an argument? 现在,当我在其上滚动时,会为所有div设置动画,如何将每个div作为参数发送?
here is a jsfiddle with my code 这是我的代码的jsfiddle
<div class="animate" id="indexJoinBanner" >
Roll over this should animate move1
<div class="move">move1XXXXXXXXXXXXX</div>
</div>
<div class="animate" id="indexJoinBanner" >
Roll over this should animate move2
<div class="move">move2XXXXXXXXXXXXX</div>
</div>
<div class="animate" id="indexJoinBanner" >
Roll over this should animate move3
<div class="move">move3XXXXXXXXXXXXX</div>
</div>
<script>
$('.animate').on('mouseover', function () {
$('.move').animate({
left: "0px",
},500 );
}).on('mouseout', function () {
$('.move').animate({
left: "-150px",
},500 );
})
</script>
Use mouseenter
and mouseleave
. 使用mouseenter
和mouseleave
。 The problem is that mouseoever
/ mouseout
get triggered when you move between child elements, which you don't want. 问题在于,在mouseoever
子元素之间移动时会触发mouseoever
/ mouseout
。
http://jsfiddle.net/ExplosionPIlls/qNBEJ/3/ http://jsfiddle.net/ExplosionPIlls/qNBEJ/3/
By calling $('.move')
you're searching for all elements with class move in document and you want to animate only child elements of currently hovered element. 通过调用$('.move')
您正在搜索文档中带有类移动的所有元素,并且您只希望为当前悬停的元素的子元素设置动画。 Also its better to use mouseenter
and mouseleave
(see documentation: mouseenter and mouseleave ) 使用mouseenter
和mouseleave
也更好(请参阅文档: mouseenter和mouseleave )
$('.animate').each(function () {
var self = $(this),
move = self.find('.move');
self.on('mouseenter', function () {
move.animate({
left: "0px"
}, 500);
}).on('mouseleave', function () {
move.animate({
left: "-150px"
}, 500);
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.