我正在尝试制作在scrollTop > 200时出现的按钮,并在scrollTop < 200时隐藏的按钮。但是我希望按钮淡入淡出,但出现了问题。
这是我的 JavaScript:
$(window).scroll(function(){
if($(this).scrollTop() > 200) {
$(".button").removeClass("opacity");
}
else {
$(".button").addClass("opacity");
};
和CSS:
.opacity { opacity:0; }
使用这样的代码,显示/隐藏功能可以正常工作,但无法使其淡入。我还尝试将我的 jscript 更改为:
$(window).scroll(function(){
if($(this).scrollTop() > 200) {
$(".button").animate({"opacity":"1"}, 1500);
else {
$(".button").animate({"opacity":"0"}, 1500);
};
但是这样根本不起作用。
我尝试的最后一件事是 fadeIn 和 fadeOut 属性有效,但是此按钮下的其他按钮在显示/隐藏后更改了位置(按钮位置:固定;随页面滚动),使得效果不太好..
有什么想法可以让它淡入和淡出吗? 谢谢
最佳答案
您的代码看起来不错,但是我最好添加 stop
方法并缩短持续时间。这应该可以正常工作:
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$(".button").stop().animate({
opacity: 1
}, 500);
} else {
$(".button").stop().animate({
opacity: 0
}, 500);
}
});
关于jquery - 滚动时淡入和淡出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10661001/