如何使用 jQuery 同时 运行 `show` 和 `animate`?
How to run `show` and `animate` at the same time with jQuery?
我知道这可能是重复的,但我尝试了不同的方法,仍然没有找到正确的解决方案!
如何让按钮在页面加载后缓慢向上移动?
为什么当我将它添加到我的 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 动画和 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>
我知道这可能是重复的,但我尝试了不同的方法,仍然没有找到正确的解决方案!
如何让按钮在页面加载后缓慢向上移动?
为什么当我将它添加到我的 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 动画和 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>