我有1到6个动态创建的div。当我滚动父div时,我也有嵌套的div,我想要动画。现在,当我滚动它时,它会动画所有的div,我如何将每个div作为参数发送?
这是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>
答案 0 :(得分:1)
使用mouseenter
和mouseleave
。问题是当您在子元素之间移动时会触发mouseoever
/ mouseout
,这是您不想要的。
答案 1 :(得分:0)
通过调用$('.move')
,您正在搜索文档中具有类移动的所有元素,并且您只想为当前悬停元素的子元素设置动画。最好使用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);
});
});