Question

我正在尝试在页面加载时左右移动div。但我所做的就是继续点击。这就是我不想要的。这是我的代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<body>

<a href="" class="left">left</a> | <a href="" class="right">right</a>
<br /><br />
<div id="foo" style="background:red;width:100px;height:100px;position:absolute"></div>

<script> 
$('.right').click(function(e) {
    e.preventDefault();
    $('#foo').css({ 'right': '0px', 'left': '' }).animate({
        'right' : '30px'    
    });                    
});

$('.left').click(function(e) {
    e.preventDefault();
    $('#foo').css({ 'right': '', 'left': '0px' }).animate({
        'left' : '30px'
    });                    
});
</script>

Answer 1

您可以使用CSS animation

执行此操作

#foo {
  background: red;
  width: 100px;
  height: 100px;
  position: absolute;
  left: 0;
  animation: leftRight linear 3s infinite alternate;
  
}

@keyframes leftRight {
  to {
    left: 100%;
    transform: translateX(-100%);
  }
}

<div id="foo"></div>

Answer 2

jQuery或浏览器无法正确分配auto值。

使用类似的东西：

$('.right').click(function(e) {
  e.preventDefault();
  $('#foo').css({ 'right': window.innerWidth - $('#foo').position().left - $('#foo').width(), 'left': 'auto' }).animate({
    'right' : '30px'
  });
});

$('.left').click(function(e) {
  e.preventDefault();
  $('#foo').css({ 'left': $('#foo').position().left, 'right': 'auto' }).animate({
    'left' : '30px'
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<a href="" class="left">left</a> | <a href="" class="right">right</a>
<br /><br />
<div id="foo" style="background:red;width:100px;height:100px;position:absolute"></div>

正如您的问题所示，如果您希望它在页面加载时自动执行，请执行以下操作：

$(function () {
  function a() {
    $('#foo').css({ 'right': window.innerWidth - $('#foo').position().left - $('#foo').width(), 'left': 'auto' }).animate({
      'right' : '30px'
    }, function () {
      $('#foo').css({ 'left': $('#foo').position().left, 'right': 'auto' }).animate({
        'left' : '30px'
      }, a);
    });
  }
  a();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<br /><br />
<div id="foo" style="background:red;width:100px;height:100px;position:absolute"></div>

在jquery中不断向左移动div

2 个答案: