Question

在第一个鼠标悬停在此文本上之后，它应向右移动200px，此后文本上的另一个鼠标返回其起始位置（向左200px）。

这是我的代码：

$(function() {

    var small = true;
    $('div').click(function() {
            small = !small;
            if (small) var properties = {
                    left: '0px'
                },
                "slow";
            else properties = {
                left: '100px'
            }, "slow"
        };

        $('.box').stop().animate(properties, 250);
    });
});

Answer 1

你的if else块中有一个类型错误，只需删除＆＃34;慢＆＃34; ，和

annimation work：

请参阅代码段：

＆＃13;

$(function() {

  val = 0;
  var properties;
  $('div').mouseover(function() {

    
    if(val<200) val+=100;
    else val =0;
    
    properties = {
      left: val+'px'
    }
    
    $('.box').stop().animate(properties, 250);
  });
});

＆＃13;

.box {
  background-color: red;
  display: block;
  width: 50px;
  height: 50px;
  position:absolute;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="border:1px solid black">hover here</div>


<span class="box">Box</span>

＆＃13;

您还可以使用css转换（通过删除addin类）

来实现此目的

见下面的代码：

＆＃13;

$(function() {

  $('div').mouseover(function() {
    if($('.box').hasClass("left100px"))
      $('.box').toggleClass("left100px").addClass("left200px");
    else if ($('.box').hasClass("left200px"))
      $('.box').toggleClass("left200px");
    else $('.box').toggleClass("left100px");
  });
});

＆＃13;

.box {
  background-color: red;
  display: block;
  width: 50px;
  height: 50px;
  position:absolute;
  transition: all .25s ease;
  left:0;
}

.left100px{
  left:100px;
}

.left200px{
  left:200px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="border:1px solid black">hover here</div>


<span class="box">Box</span>

＆＃13;

Answer 2

使用onmouseover然后toggle class至right并在css中设置margin-left 对于动画使用transition: all .5s ease;

＆＃13;

function func(){ 
$('.left').toggleClass("right");
}

＆＃13;

div{
background-color:blue;
width:150px;
transition: all .5s ease;
}
.right{
margin-left:200px
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div onmouseover="func()" class="left">try me</div>

＆＃13;

Answer 3

也许在程序之下会帮助你

@SuppressWarning("unchecked")

$(function() {

  var i = 0;
  var value;
  $('div').mouseover(function() {

    
    if(i<200){
    i+=200;
    }
    else {i =0;}
    
    value = {
      left: i+'px'
    }
    
    $('div').stop().animate(value, 1000);
  });
});

div {
  background-color: green;
  display: block;
  width: 100px;
  height: 100px;
  position:absolute;
}

2鼠标悬停后反转动画

3 个答案: