Question

我在jQuery中做了一个回到顶部的按钮，

      $(window).scroll(function () {
    if ($(this).scrollTop() > 50) {
      $('.back-to-top').slideDown();
    } else {
      $('.back-to-top').slideUp();
    }
  });


  // scroll body to 0px on click
  $('.back-to-top').click(function () {
    $('.back-to-top').tooltip('hide');
    $('body,html').animate({
      scrollTop: 0
    }, 800);
    return false;
  });
  $('.back-to-top').tooltip('show');

滚动时它向下和向上滑动，但现在我希望它在可见时不时摇晃（4-5次）。不幸的是，当我在我的CSS中我做 - 显示：无（因此它在页面加载时不会出现） - 滚动后出现时不会抖动。为什么呢？

.back-to-top {
  background: url(img/gruszka.png);
  width: 70px;
  height: 70px;
  background-size: 70px 70px;
  background-repeat: no-repeat;
  cursor: pointer;
  position: fixed;
  bottom: 20px;
  right: 20px;
  display:none;
  border: none;

当我删除display：none时，它正在工作和摇晃。但我喜欢滚动时滑动的效果...... 所以我在jquery中做了一个改变：

      $(window).scroll(function () {
    if ($(this).scrollTop() > 50) {
      $('.back-to-top').slideDown();
      $(".back-to-top").effect( "shake"); //I added this line
    } else {
      $('.back-to-top').slideUp();
    }
  });

现在它在滚动和抖动时出现但不想隐藏，所以我应该在css中做什么来滚动时开始摇动或者在jQuery中滚动时停下来并停止摇动。谢谢您的帮助。如果它可能我想你给你选择如何在css和另一个jQuery中解决它。

Answer 1

已更新为Interval

您可以使用以下摇动类，并在延迟一段时间后将其添加到div中，反之亦然。

setInterval(function() {
  document.querySelector('.shake').classList.toggle("shaking");

}, 1000);

div {
  background: red;
  width: 120px;
  height: 50px;
}

.shaking {
  animation: shake 0.82s cubic-bezier(.36, .07, .19, .97);
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

<div class="shake"></div>

显示时，返回顶部按钮不会抖动：无

1 个答案: