jquery - 如何使用 jQuery 同时运行 `show` 和 `animate`？

Question

我知道这可能是重复的，但我尝试了不同的方法，仍然没有找到正确的解决方案!

如何让按钮在页面加载后缓慢向上移动？以及为什么当我将它添加到我的 js 时文件功能不起作用？但它会在 html <script> 中工作标签，我确定我的 js正确链接到我的 html。

代码如下:

$(document).ready(function() {
  $("#back__button").delay(3000).show("slow").animate({
    bottom: '20px',
    opacity: '1'
  }, 1500).addClass("jumping__btn");
});



/* $(document).ready(function() {

$('#back__button').css({'display':'block', 'opacity':'0'}).animate({'opacity':'1','bottom':'20px'}, 1500);
}); */

.back__button {
  text-align: center;
  display: none;
  opacity: 0;
  width: 100%;
  position: absolute;
  bottom: -70px;
}

.back__button a {
  color: #ffe9c6;
  display: inline-block;
  padding: 10px;
  text-decoration: none;
}

.back__button,
#home__button {
  transition: 200ms;
  transition-timing-function: ease-in-out;
}

.back__button a:hover {
  color: #C89822;
}

<div class="back__button" id="back__button">
  <a href="portfolio.html" class="scroll active">
    <svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
    <br />Back</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

您正在混合使用 jQuery 动画和 CSS 过渡。移除 CSS 过渡:

.back__button,
#home__button {
  transition: 200ms;
  transition-timing-function: ease-in-out;
}

并且您的 jQuery 动画按预期工作:

$(document).ready(function() {
  $("#back__button").delay(3000).show("slow").animate({
    bottom: '20px',
    opacity: '1'
  }, 1500).addClass("jumping__btn");
});

.back__button {
  text-align: center;
  display: none;
  opacity: 0;
  width: 100%;
  position: absolute;
  bottom: -70px;
}

.back__button a {
  color: #ffe9c6;
  display: inline-block;
  padding: 10px;
  text-decoration: none;
}
/*
.back__button,
#home__button {
  transition: 200ms;
  transition-timing-function: ease-in-out;
}
*/
.back__button a:hover {
  color: #C89822;
}

<div class="back__button" id="back__button">
  <a href="portfolio.html" class="scroll active">
    <svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
    <br />Back</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>