Question

我想在jquery中制作一个动画：在悬停时，两个div改变位置，在mouseout上它们返回到旧位置。（第一个div上升，第二个下降，然后（鼠标输出）返回）

问题：这些div正在不断上升（我认为，所有事件都会发生）

这是我的代码：

$(document).ready(function() {
$( "#container_wm" ).hover(function() {
  $( "#w" ).animate({
    marginTop: "-=100px"
  });
   $( "#m" ).animate({
    marginTop: "+=100px"
  });
});

$( "#container_wm" ).mouseout(function() {
  $( "#w" ).animate({
    marginTop: "+=100px"
  });
  $( "#m" ).animate({
    marginTop: "-=100px"
  });
});

});

ps：感谢您的帮助，对不起语法错误

Answer 1

很简单。在每个动画的开头使用此代码过程

$( "#container_wm" ).mouseout(function() {
  $(this).stop(true);
  $( "#w" ).animate({
    marginTop: "+=100px"
  });

$(this).stop(true); //重复阻止动画

Answer 2

不要使用悬停 ..使用 mouseenter 事件。

不要使用 mouseout ..使用 mouseleave 事件。

它将解决您的问题

$(document).ready(function(){
    $("#parentDiv").mouseenter(function(){
        $(this).stop(true);
        $("#child1").animate({marginTop:'-=100px'});
        $("#child2").animate({marginTop:'+=100px'});
    })
    $("#parentDiv").mouseleave(function(){
        $(this).stop(true);
        $("#child1").animate({marginTop:'+=100px'});
        $("#child2").animate({marginTop:'-=100px'});
    })
})

它会对你有用.. !!

Answer 3

试试这个解决方案！

<强> HTML

<div id="container_wm">Hover me</div>
<div id="w"></div>
<div id="m"></div>

<强> CSS

#container_wm { width:100px; height:100px; background-color:blue; color:#fff; cursor:pointer;}
    #w { position:absolute; left:200px; top:50px; width:100px; height:100px; background:yellow;}
    #m { position:absolute; left:200px; top:150px; width:100px; height:100px; background:green;}

<强>代码

$('#container_wm').mouseover(function(){
    $('#w').animate({marginTop:'-=100px'});
    $('#m').animate({marginTop:'+=100px'});
}).mouseleave(function(){
    $('#w').animate({marginTop:'+=100px'});
    $('#m').animate({marginTop:'-=100px'});
});

Demo Fiddle

Answer 4

选中此jsfidle，您需要将hover更改为mouseenter。

的javascript

$（document）.ready（function（）{

'use strict';

var space = 15;
$("#container_wm").mouseenter(function () {
    $("#w").animate({
        top: "-=" + space + "px"
    });

    $("#m").animate({
        top: "+=" + space + "px"
    });
});

$("#container_wm").mouseout(function () {
    $("#w").animate({
        top: "+=" + space + "px"
    });

    $("#m").animate({
        top: "-=" + space + "px"
    });
});

}）;

jquery animate（）div打开

4 个答案: