我的动画没有按预期工作
My animations arent working as expected
im试图在5秒钟后淡出视频,然后在按下按钮后淡出视频。然后将页面滚动到下一节。
在下一节中,它应该为一些div设置动画,然后。。。。按下按钮转到下一个部分,淡出之前动画化的div,然后转到下一部分。
第三个滚动按钮根本不起作用。
只有最后两个滚动按钮可以工作。。。。我不明白为什么只有最后2周,而不是前3周。
注意:我还想取消页面上的滚动条,并通过滚动按钮导航页面。这是给我带来麻烦的代码:
<script>
$(document).ready(function(){
//Kill Page Scrollbar
$('html, body').css({
'overflow': 'hidden',
'height': '100%'
});
//animate the registration video fading in
$('#Video').fadeTo(3000, 1);
//Make scrollbutton clickable
$('.ScrollButton_White1').click(function(){
//Fade Video out
$('#Video').fadeTo(3000, 0), (function(){
//define the variable "diamonds"
var diamonds = $('#PresenterContainer').children()
//animate the scrolling of the page down to the anchor point//
$('html, body').animate({
scrollTop: $("#PresenterContainer_AnchorPoint").offset().top
}, 5000,
function() {
diamonds.show();
});
});
});
<!--scroll button 2-->
$('.ScrollButton_Gold1').click(function(){
diamonds.hide();
$('html, body').animate({
scrollTop: $("#YouAskedForIt_AnchorPoint").offset().top
}, 5000
);
});
<!--scroll button 3-->
$('.ScrollButton_White3').click(function(){
$('html, body').animate({
scrollTop: $("#ReturnChampion_AnchorPoint").offset().top
}, 5000
);
});
<!--scroll button 4-->
$('.ScrollButton_Gold1').click(function(){
$('html, body').animate({
scrollTop: $("#YouAskedForIt_AnchorPoint").offset().top
}, 5000);
});
<!--scroll button 5-->
$('.ScrollButton_Gold2').click(function(){
$('html, body').animate({
scrollTop: $("#WhatYouWillLearn_AnchorPoint").offset().top
}, 5000);
});
<!--animate presenter diamond buttons-->
<!--$(window).scroll(function(event) {
<!--$('#Diamond_DarrenHardy').addClass('animate_rf');
<!--$('#Diamond_RobertKiyosaki').addClass('animate_rf');-->
<!--});
<!--end jquery script-->
});
</script>
您的代码中似乎有拼写错误
$('#Video').fadeTo(3000, 0), (function() {
//define the variable "diamonds"
var diamonds = $('#PresenterContainer').children()
//animate the scrolling of the page down to the anchor point//
$('html, body').animate({
scrollTop: $("#PresenterContainer_AnchorPoint").offset().top
}, 5000,
function() {
diamonds.show();
});
});
在$('#Video').fadeTo(3000, 0), (function() {
如果你想使用fadeTo的回调功能,它应该是
$('#Video').fadeTo(3000, 0, function() {
//define the variable "diamonds"
var diamonds = $('#PresenterContainer').children()
//animate the scrolling of the page down to the anchor point//
$('html, body').animate({
scrollTop: $("#PresenterContainer_AnchorPoint").offset().top
}, 5000,
function() {
diamonds.show();
});
});
相关文章:
- 响应动画手风琴不工作
- html5画布动画无法正常工作
- 猫头鹰旋转木马2罐头't使渐变动画工作
- 我的动画没有按预期工作
- Jquery scrollTop动画不工作"无法读取属性'top'无风
- 对链接的 svg 进行动画处理不起作用;内联时工作正常
- Jquery动画函数不工作
- jQuery中基于画框的英雄动画是't工作
- 动画HTML5横幅工作在除Safari以外的一切
- 猫头鹰旋转木马2动画不工作
- JQuery动画打断了脚本,但如果没有它,脚本就可以工作
- jQuery动画工作,但并不总是
- fadeIn动画无法在IE中工作(所有版本)
- 动画速度滑块不工作
- jQuery+Animate.css动画只工作一次,动画不会重置
- 画布动画未按预期工作
- JavaScript库-WebGL-2D动画不工作
- 动画结束侦听器无法正常工作
- 如果 Ajax 请求太快,jQuery 动画将无法正常工作
- 停止动画停止工作,jQuery/悬停