如何使用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>