如何使用jQuery同时运行`show`和`animate`？答案

【问题标题】：How to run `show` and `animate` at the same time with jQuery?如何使用jQuery同时运行`show`和`animate`？
【发布时间】：2018-03-04 02:03:24
【问题描述】：

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

如何在页面加载后让按钮缓慢上移？为什么当我将它添加到我的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>

【问题讨论】：

标签： jquery html css jquery-animate

【解决方案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>

【讨论】：