我试图让一系列元素在窗口中完全可见时在向下滚动时淡入。如果我继续向下滚动，我不希望它们淡出，但如果我向上滚动，我确实希望它们淡出。
这是我发现的最接近的jsfiddle。http://jsfiddle.net/tcloninger/e5qaD/
$(document).ready(function() {
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.hideme').each( function(i){
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if( bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},500);
}
});
});
});
它完全符合我在向下滚动时想要的效果，但我也希望如果我向上滚动经过它们，这些元素就会淡出。
我尝试过这个但没有运气。
if( bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},500);
} else {
$(this).animate({'opacity':'0'},500); }
非常感谢您花时间查看此内容。
您的尝试不起作用的原因是两个动画（淡入和淡出）相互对抗。
就在对象变得可见之前，它仍然不可见，因此会运行淡出动画。然后，不到一秒后，当同一对象变得可见时，淡入动画将尝试运行，但淡出动画仍在运行。所以他们会互相对抗，而你什么也看不到。
最终该对象将变得可见（大多数时候），但这需要一段时间。如果您使用滚动条按钮上的箭头按钮向下滚动，动画就会起作用，因为您将使用更大的增量滚动，从而创建更少的滚动事件。
解释得够多了，解决方案（JS、CSS、HTML）：
$(window).on("load",function() {
$(window).scroll(function() {
var windowBottom = $(this).scrollTop() + $(this).innerHeight();
$(".fade").each(function() {
/* Check the location of each desired element */
var objectBottom = $(this).offset().top + $(this).outerHeight();
/* If the element is completely within bounds of the window, fade it in */
if (objectBottom < windowBottom) { //object comes into view (scrolling down)
if ($(this).css("opacity")==0) {$(this).fadeTo(500,1);}
} else { //object goes out of view (scrolling up)
if ($(this).css("opacity")==1) {$(this).fadeTo(500,0);}
}
});
}).scroll(); //invoke scroll-handler on page-load
});
.fade {
margin: 50px;
padding: 50px;
background-color: lightgreen;
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div>
<div class="fade">Fade In 01</div>
<div class="fade">Fade In 02</div>
<div class="fade">Fade In 03</div>
<div class="fade">Fade In 04</div>
<div class="fade">Fade In 05</div>
<div class="fade">Fade In 06</div>
<div class="fade">Fade In 07</div>
<div class="fade">Fade In 08</div>
<div class="fade">Fade In 09</div>
<div class="fade">Fade In 10</div>
</div>
(
fiddle: http://jsfiddle.net/eLwex993/2/)
- 我将淡入淡出代码行包装在 if 子句中：
if ($(this).css("opacity")==0) {...}。这可以确保该对象仅在opacity is 0。淡出也是如此。这可以防止淡入和淡出相互冲突，因为现在只有两者之一在一个对象上运行。
- 我变了
.animate() to .fadeTo()。它是 jQuery 专门用于不透明度的函数，编写起来要短得多，并且可能比 animate 更轻。
- 我变了
.position() to .offset()。这总是相对于主体进行计算，而位置是相对于父级进行计算。对于你的情况，我相信抵消是可行的方法。
- 我变了
$(window).height() to $(window).innerHeight()。根据我的经验，后者更可靠。
- 在滚动处理程序之后，我在页面加载时调用该处理程序一次
$(window).scroll();。现在您可以为页面上的所有所需对象提供.fade类以及在页面加载时不可见的对象将立即淡出。
- 我删除了
#container来自 HTML 和 CSS，因为（至少对于这个答案）这是没有必要的。 （我想也许你需要height:2000px因为你用过.position()代替.offset()，否则我不知道。当然，请随意将其留在您的代码中。）
UPDATE
如果您想要除以下以外的不透明度值0 and 1，使用以下代码：
$(window).on("load",function() {
function fade(pageLoad) {
var windowBottom = $(window).scrollTop() + $(window).innerHeight();
var min = 0.3;
var max = 0.7;
var threshold = 0.01;
$(".fade").each(function() {
/* Check the location of each desired element */
var objectBottom = $(this).offset().top + $(this).outerHeight();
/* If the element is completely within bounds of the window, fade it in */
if (objectBottom < windowBottom) { //object comes into view (scrolling down)
if ($(this).css("opacity")<=min+threshold || pageLoad) {$(this).fadeTo(500,max);}
} else { //object goes out of view (scrolling up)
if ($(this).css("opacity")>=max-threshold || pageLoad) {$(this).fadeTo(500,min);}
}
});
} fade(true); //fade elements on page-load
$(window).scroll(function(){fade(false);}); //fade elements on scroll
});
.fade {
margin: 50px;
padding: 50px;
background-color: lightgreen;
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div>
<div class="fade">Fade In 01</div>
<div class="fade">Fade In 02</div>
<div class="fade">Fade In 03</div>
<div class="fade">Fade In 04</div>
<div class="fade">Fade In 05</div>
<div class="fade">Fade In 06</div>
<div class="fade">Fade In 07</div>
<div class="fade">Fade In 08</div>
<div class="fade">Fade In 09</div>
<div class="fade">Fade In 10</div>
</div>
(fiddle:
http://jsfiddle.net/eLwex993/3/)
- 我在 if 子句中添加了一个阈值，请参阅解释 below.
- 我为
threshold并为min/max在函数的开始处。在函数的其余部分中，将引用这些变量。这样，如果您想再次更改这些值，只需在一处进行即可。
- 我还添加了
|| pageLoad到 if 子句。这是确保所有对象在页面加载时褪色到正确的不透明度所必需的。pageLoad是一个布尔值，当fade()被调用。
我必须将淡入淡出代码放入额外的function fade() {...}，以便能够发送pageLoad调用滚动处理程序时为布尔值。
我没有看到任何其他方法可以做到这一点，如果其他人这样做，请发表评论。
解释：
代码中的原因你的小提琴不起作用，是因为实际的不透明度值总是与您设置的值略有偏差。所以如果你将不透明度设置为0.3，实际值（在本例中）是0.300000011920929。这只是你必须通过反复试验来学习的小错误之一。这就是为什么这个 if 子句不起作用的原因：if ($(this).css("opacity") == 0.3) {...}.
我添加了一个阈值，以考虑到这种差异：== 0.3变成<= 0.31.
（我已将阈值设置为0.01，当然可以更改，只要实际不透明度落在设置值和该阈值之间即可。）
运营商现在更改为== to <= and >=.
更新2：
如果您想根据元素的可见百分比淡入淡出，请使用以下代码：
$(window).on("load",function() {
function fade(pageLoad) {
var windowTop=$(window).scrollTop(), windowBottom=windowTop+$(window).innerHeight();
var min=0.3, max=0.7, threshold=0.01;
$(".fade").each(function() {
/* Check the location of each desired element */
var objectHeight=$(this).outerHeight(), objectTop=$(this).offset().top, objectBottom=$(this).offset().top+objectHeight;
/* Fade element in/out based on its visible percentage */
if (objectTop < windowTop) {
if (objectBottom > windowTop) {$(this).fadeTo(0,min+((max-min)*((objectBottom-windowTop)/objectHeight)));}
else if ($(this).css("opacity")>=min+threshold || pageLoad) {$(this).fadeTo(0,min);}
} else if (objectBottom > windowBottom) {
if (objectTop < windowBottom) {$(this).fadeTo(0,min+((max-min)*((windowBottom-objectTop)/objectHeight)));}
else if ($(this).css("opacity")>=min+threshold || pageLoad) {$(this).fadeTo(0,min);}
} else if ($(this).css("opacity")<=max-threshold || pageLoad) {$(this).fadeTo(0,max);}
});
} fade(true); //fade elements on page-load
$(window).scroll(function(){fade(false);}); //fade elements on scroll
});
.fade {
margin: 50px;
padding: 50px;
background-color: lightgreen;
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div>
<div class="fade">Fade In 01</div>
<div class="fade">Fade In 02</div>
<div class="fade">Fade In 03</div>
<div class="fade">Fade In 04</div>
<div class="fade">Fade In 05</div>
<div class="fade">Fade In 06</div>
<div class="fade">Fade In 07</div>
<div class="fade">Fade In 08</div>
<div class="fade">Fade In 09</div>
<div class="fade">Fade In 10</div>
</div>
(fiddle:
http://jsfiddle.net/eLwex993/5/)
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
