一旦经过响应页面中的某个点，如何在图像中设置动画和淡入淡出

How to animate and fade in an image once passed a certain point in a responsive page?

本文关键字：图像 设置 淡出 淡入 动画 响应 经过      更新时间：2023-09-26

一旦图像在视口中，我希望淡入并向左滑动图像。目前，我在让代码正确运行方面遇到了问题，但同时也在思考为了让jQuery处理div高度的响应移动，需要更改什么。

下面的代码

jQuery

<script>
    $(window).one("scroll", function () {
        var currentScroll = $(window).scrollTop();
        if (currentScroll >= 700) 
            $('#iphone').fadeIn(1000).animate({
                left: '200px'
            });     
    });
</script>

HTML

<div class="col-md-4">
    <img src="/images/iPhone-6.png" height="250px" width="auto" id="iphone">
</div>

谢谢！

$(window).one("phone"...-我不认为"phone"是jQuery中的有效事件。

如果你试图在页面滚动时触发一个事件，你可能正在寻找这样的东西：

<script>
      var iphonePosition = $('#iphone').offset().top;
      $(window).one("scroll", function() {
        var currentScroll = $(window).scrollTop();
        if (currentScroll >= iphonePosition) 
          $('#iphone').fadeIn(1000).animate({
            left: '200px'
        });     
      });
</script>

请注意，您使用.one()意味着无论函数内部发生什么，此事件都将仅在第一次滚动时发生。如果这不是所需的行为，可以考虑只使用$(window).scroll(function() {...，并将函数的内部封装在另一个if中，如下所示：

<script>
      var iphonePosition = $('#iphone').offset().top;
      $(window).on("scroll", function() {
        var currentScroll = $(window).scrollTop();
        if (currentScroll >= iphonePosition) {
            $('#iphone').fadeIn(1000).animate({
              left: '200px'
            });
            $(window).off(); //Our fade-in was triggered, unbind the event
        }
      });
</script>

要实现预期结果，请使用以下选项
1.为id-iphone添加position:absolute使left为：200px以显示效果
2.使用.on函数而不是.one，如果animate在每个scrollTop上生效，而不仅仅是一次。

HTML:

    <div class="col-md-4 ">
        <img src="http://www.w3schools.com/css/img_fjords.jpg" height="250px" width="auto" id="iphone">
</div>

CSS：

#iphone{
  position:absolute;
}

JS:

      $(window).on("scroll", function() {
        var currentScroll = $(window).scrollTop();
        if (currentScroll >= 100) {
                     $('#iphone').fadeIn(1000).animate({
            left: '200px'
        });  
        }
      }
);

http://codepen.io/nagasai/pen/GqYXKJ

document.scrollTop 的轮询

如果要检查图像是否在视口内。您应该得到图像的文档位置，并减去scrollTop值。

相关文章：