Question

我有以下代码，如果我只使用第一个if语句，它按预期工作。添加else if语句会使元素在任一函数中都不正常。

目标是在窗口调整到某个点以下时将其设置为某个位置的动画。如果窗口调整得更大，则应该返回到起始位置。

var logoPosition = $('.akc-logo').position();
console.log(logoPosition);

$(window).resize(function display(){
   console.log($(window).width());
      if($(window).width()<991){
         $('.akc-logo').animate({left: '20em'}, 1000);
      }else if($(window).width()>991){
         $('.akc-logo').animate({top: logoPosition.top, left: logoPosition.left}, 1000);
      }
});

Answer 1

您的问题可能与动画队列有关。由于调整大小事件可以以高速率发射，因此许多动画可以排队。动画将按照排队的顺序执行，在您看到适合当前窗口大小的动画之前可能需要一段时间。

在我的示例中，我添加了jQuery＆＃39; stop()，以便在启动另一个动画之前取消当前动画。

（注意：使用＆＃34;整页＆＃34;链接来调整窗口大小。）

＆＃13;

var logoPosition = $('.akc-logo').position(),
  threshold = 500;

$(window).resize(function() {
  if ($(window).width() < threshold) {
    $('.akc-logo').stop().animate({
      left: '20em'
    }, 1000);
  } else {
    $('.akc-logo').stop().animate({
      top: logoPosition.top,
      left: logoPosition.left
    }, 1000);
  }
});

＆＃13;

div.akc-logo {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 50px;
  height: 50px;
  background-color: black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="akc-logo"></div>

＆＃13;

View on JSFiddle

我还建议throttling or debouncing your resize handler。

退房：
Paul Irish's Debounced Resize() jQuery Plugin
David Walsh's JavaScript Debounce Function
Ben Alman's throttle/debounce

编辑：

更轻量级的解决方案是使用CSS和媒体查询处理动画。但我想这个解决方案的功效取决于您的具体情况。

＆＃13;

.akc-logo {
  position: absolute;
  top: 50px;
  left: 20em;
  width: 50px;
  height: 50px;
  background-color: black;
  -webkit-transition: left 1s ease-in-out;
  transition: left 1s ease-in-out;
}
@media (max-width: 500px) {
  .akc-logo {
    left: 50px;
  }
}

＆＃13;

<div class="akc-logo"></div>

＆＃13;

View on JSFiddle

如何使用jQuery动画返回位置

1 个答案:

编辑：