fadeIn（）無效，但fadeOut（）可以
[英]fadeIn() doesn't work but fadeOut() is ok
問題描述
我想在我的scrollToTop中添加一個fadeIn（）和fadeOut（），但是fadeIn無法正常工作。
如果您想看看，我已經創建了一些GIF： 這里是第一個GIF
如您所見，scrollToTop按鈕上的fadeIn（）由窗口的滾動觸發，
這是我的代碼：
$(document).ready(function() {
//Check to see if the window is top if not then display button
$('.modal-content').scroll(function() {
if ($(this).scrollTop() > 100) {
$(".scrollToTop").fadeIn(1000);
} else {
$('.scrollToTop').fadeOut(1000);
}
});
//Click event to scroll to top
$('.scrollToTop').click(function() {
$('.modal-content').animate({
scrollTop: 0
}, 500);
return false;
});
});
<a id="up" class="scrollToTop" style="display:none;"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>
5 個解決方案
解決方案1
0 2016-06-15 11:28:13
我不是jQuery的專家，但是在我看來，您的問題似乎出在您幾乎每次滾動頁面時都要調用fadeIn 。 我建議您創建一個名為buttonShowing的布爾值（或其他值），並將其設置為false。
然后，在相應的if和else語句的末尾，更改每次用戶滾動時的buttonShowing 。 然后，在if / else語句的開始處，您可以檢查buttonShowing狀態是否已更改，並且自上次滾動事件觸發以來狀態是否已更改，則僅檢查fadeIn / Out。 這是代碼：
$(document).ready(function() {
var buttonShowing = false;
//Check to see if the window is top if not then display button
$('.modal-content').scroll(function() {
if ($(this).scrollTop() > 100) {
if(!buttonShowing) $(".scrollToTop").fadeIn(1000);
buttonShowing = true;
} else {
if(buttonShowing) $('.scrollToTop').fadeOut(1000);
buttonShowing = false;
}
});
//Click event to scroll to top
$('.scrollToTop').click(function() {
$('.modal-content').animate({
scrollTop: 0
}, 500);
return false;
});
});
解決方案2
0 2016-06-15 11:28:45
最適合您的解決方案：
$(window).scroll(function() {
var scroll_pos = window.pageYOffset;
var scroll_div = $('.modal-content').offset().top;
if(scroll_pos > scroll_div) {
if ($(this).scrollTop() > 100)
$(".scrollToTop").fadeIn(1000);
else
$('.scrollToTop').fadeOut(1000);
}
});
或將$('.modal-content').scroll(function() {更改$(window).scroll(function() {
$(document).ready(function() {
//Check to see if the window is top if not then display button
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$(".scrollToTop").fadeIn(1000);
} else {
$('.scrollToTop').fadeOut(1000);
}
});
//Click event to scroll to top
$('.scrollToTop').click(function() {
$('.modal-content').animate({
scrollTop: 0
}, 500);
return false;
});
});
解決方案3
0 2016-06-15 11:32:11
本示例可能會為您提供幫助。 ：
<html>
<head>
<style>
body {
height: 1200px;
}
div {
width: 50px;
height: 50px;
background-color: red;
border-radius: 100%;
position: fixed;
display: none;
}
</style>
</head>
<body>
<div id="cir"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(window).scroll(function(){
if($(document).scrollTop()>100)
$("#cir").fadeIn(1000);
else
$("#cir").fadeOut(800);
})
</script>
</body>
</html>
解決方案4
0 2016-06-15 12:31:19
$（window）.scroll（function（）的解決方案不起作用，因為此腳本用於模式。
這是我的HTML模態代碼之一：
<!-- Modal Structure --> <div id="modal1" class="modal modal-fixed-footer"> <div class="modal-content"> <!-- My content --> <h4>Ajouter une recette</h4> <div class="row"> <div class="input-field col s6 offset-s3"> <input id="libelle" type="text" class="validate"> <label for="libelle">Nom de la recette</label> </div> </div> <form id="form_ingredient"> <div class="row"> <div class="col s4 offset-s1 input-field"> <input id="ingredient" name="ingredient" type="text" class="validate"> <label for="ingredient">Ingredient</label> </div> <div class="col s4 offset-s2 input-field"> <input id="poid" name="poid" type="number" class="validate"> <label for="poid">Poid</label> </div> </div> </form> </div> <div class="modal-footer" style="text-align: right;"> <!-- My footer --> <a id="up" class="scrollToTop" style="display:none;"><i class="fa fa-arrow-up" aria-hidden="true"></i></a> <a id="add_ing"><i class="fa fa-plus" aria-hidden="true"></i></a> <a id="valid_ing" style="margin-left: 1.5%;"><i class="fa fa-check" aria-hidden="true"></i></a> </div> </div> <script> //The script that I try to use </script>
解決方案5
0 2016-06-15 13:23:36
我解決了Css的問題，只需將這些類添加到樣式表中：
.scrollToTop{
opacity:0;
text-decoration: none;
transition:opacity 1s ease-in;
float: left; }
.scrollToTop.visible {
opacity:1; }
這Js和那工作：
$('.modal-content').scroll(function(){
if ($(this).scrollTop() > 100) {
$(".scrollToTop").addClass('visible').css("cursor", "pointer");
} else {
$('.scrollToTop').removeClass('visible').css("cursor", "default");
}
});
jquery：fadeOut（）。empty（）。append（...）。fadeIn（）僅在第一次不能正常工作
[英]jquery: fadeOut().empty().append(…).fadeIn() doesn't work properly only the first time
為什么fadeIn（），fadeOut（），show（400），hide（400）動畫在我的情況下不起作用？
[英]Why fadeIn(), fadeOut(), show(400), hide(400) animations doesn't work in my case?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
jQuery FadeOut（）和FadeIn（）函數不起作用
fadeOut-> fadeIn不能正常工作
jQuery .fadeOut然后等待，然后.fadeIn不起作用
淡出有效，但淡入不起作用
“ FadeIn”和“ FadeOut”不起作用
鼠標懸停時Javascript淡入有效，但不淡出
javascript中的fadeIn（），fadeOut（）不起作用
jquery：fadeOut（）。empty（）。append（...）。fadeIn（）僅在第一次不能正常工作
為什么fadeIn（），fadeOut（），show（400），hide（400）動畫在我的情況下不起作用？
scrollTop（）上的fadeOut（）== 0不起作用
相關標簽