Question

我只能在不重新加载页面的情况下完成动画一次。

关于同样的问题有一个类似的问题，但我似乎无法重新启动mouseenter。提前谢谢。

＆＃13;

$(document).ready(function() {
  $('#root').mouseenter(function() {
    $(this).animate({
      'right': '200'
    });
  });
  $('#root').mouseleave(function() {
    $(this).animate({
      'left': '200'
    });
  });
});

＆＃13;

#root {
  height: 100px;
  width: 100px;
  background-color: darkblue;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="root"></div>

＆＃13;

Answer 1

您正在为两个不同的属性设置动画，right和left。那些不是他们旅行的方向，它们代表了它们与父容器左右两侧的偏移距离。

你现在的方式，你正在应用这两个属性，永远不会删除它们。如果您尝试使元素像抽屉一样滑出，则只应为left属性设置动画，在200px上为其添加mouseenter并设置{{1 } {}返回left上的0px。如果您尝试使元素看起来增长，则应该为mouseleave或width设置动画，但请遵循right上的相同重置过程。

HOWEVER！更简单的方法来实现您想要的纯粹CSS过渡。这些动画将更加流畅，通常是GPU加速，具有不同的缓动曲线，即使鼠标在鼠标输入动画完成之前离开也会正确重置。

mouseleave

.target {
  padding: 10px;
  background: cornflowerblue;
  width: 50%;
  
  /* the transition does all the work */
  transition: transform 500ms ease-in-out;
}

.target:hover {
  /* use a transform for easier position movement */
  transform: translateX(200px);
}

Answer 2

因为left和right定位并不总是互相覆盖。您需要在观察另一个之前删除一个：

$('#root').mouseenter(function() {
    $(this).css( "left", "" );
    $(this).animate({
        'right': '200'
    });
});
$('#root').mouseleave(function() {
    $(this).css( "right", "" );
    $(this).animate({
        'left': '200'
    });
});

或者，如果您只是想返回其原始位置，则可以将right值返回0：

$('#root').mouseenter(function() {
    $(this).animate({
        'right': '200'
    });
});
$('#root').mouseleave(function() {
    $(this).animate({
        'right': '0'
    });
});

Answer 3

而不是使用'left': '200'使用'right': '0'。

＆＃13;

 <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>My Practice Page</title>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="master.js"></script>

<style>
#root {
    height: 100px;
    width: 100px;
    background-color: darkblue;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
</style>
    </head>

    <body>
        <div id="root">

        </div>
<script>
$(document).ready(function() {
    $('#root').mouseenter(function() {
 		$('#root').animate({
            'right': '200'
        });
    });
    $('#root').mouseleave(function() {
        $('#root').animate({
            'right': '0'
        });
    });
});
</script>

</body>

</html>

＆＃13;

这是有效的，因为你动画了两件不同的东西。

为什么jQuery动画只运行一次

3 个答案: