Question

我在将div框从a移动到b然后再返回时遇到了问题。当鼠标离开div框时，我还需要它返回到开始位置。这是我到目前为止所提出的。

<div id="tank" style=" width:344px; height:300px;
 background-image:url('images/warning2.png');
 box-shadow:0px 0px 100px;
 ;border-radius:20px; position:relative; left:-180px; top:10px;">
 </div>


 <script type="text/javascript">

 document.getElementById('tank').onmouseover = function() {
 var elem = this, 
 pos = -180,

 timer = setInterval(function() {
 pos--;
 elem.style.left = pos+"px";
 if( pos == 500) clearInterval(timer) ;
 document.getElementById('plane').onmouseover = null;
 },1);
 };

Answer 1

如果您可以使用jQuery，则可以执行以下操作：

$("#tank").hover(
  function () {
    $(this).animate({
        left: '-=180'
    });
  }, 
  function () {
    $(this).animate({
        left: '+=180'
    });
  }
);

http://jsfiddle.net/charlescarver/QgF2h/

Answer 2

你的位置从-180开始，你的最终位置是+500。但是你正在减少位置变量的值，所以它永远不会达到500。

至于退出鼠标，你应该这样做：

var timer = null;
var tank = document.getElementById('tank');

function animate(elem, target)
{
    var pos = parseInt(elem.style.left.replace(/[^0-9\-]/g, ""));

    clearInterval(timer);
    timer = setInterval(function()
    {
        elem.style.left = (pos += pos < target ? 1 : -1) + "px";
        if(pos == target) clearInterval(timer) ;
    }, 1);
}

tank.addEventListener("mouseover", function()
{
    animate(this, 500);
}, false);

tank.addEventListener("mouseout", function()
{
    animate(this, -180);
}, false);

如何在鼠标移开时将对象从开始位置移动到结束位置，然后在鼠标移出时再移回

2 个答案: