堆栈内存溢出
  繁体   English   中英

使用 jquery 淡入淡出元素

[英]Fade in and out elements with jquery

 原文  2020-03-30 19:16:53  4   1    javascript/ jquery/ html/ css

问题描述

现在我有两个我无法修复的代码问题：

1）在jsfiddle中，向下滚动时项目会淡入，但是当我使用sublime（或记事本++）尝试时，淡入仅在刷新页面和向上滚动时有效。

2）对于淡出，我试图将这部分添加到代码中，但它不起作用。 更糟糕的是它实际上打破了第一个淡入（这个问题发生在 jsfiddle 和本地）

 //check if this current container is within view
    if ((element_bottom_position >= window_top_position) &&
      (element_top_position <= window_bottom_position)) {
      $(this).animate({'opacity':'1'},500);
    } else {
          $(this).animate({'opacity':'0'},500);
      }

jsfiddle： https ://jsfiddle.net/ja5nz1ux/

（目前我正在 html 本身中做所有事情）

编码： 

 <HTML> <HEAD> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <style> .timeline { --uiTimelineMainColor: var(--timelineMainColor, #008080); --uiTimelineSecondaryColor: var(--timelineSecondaryColor, #fff); position: relative; padding-top: 3rem; padding-bottom: 3rem; } .timeline:before { content: ""; width: 4px; height: 100%; /* Color line */ background-color: #2e4053; position: absolute; top: 0; } .timeline__group { position: relative; opacity: 1; } .timeline__group:not(:first-of-type) { margin-top: 4rem; } .timeline__year { padding: .5rem 1.5rem; color: var(--uiTimelineSecondaryColor); background-color: var(--uiTimelineMainColor); position: absolute; left: 0; top: 0; } .timeline__box { position: relative; opacity: 0; } .timeline__box:not(:last-of-type) { margin-bottom: 30px; } .timeline__box:before { content: ""; width: 100%; height: 2px; /* color line middle */ background-color: #c39bd3; position: absolute; left: 0; z-index: -1; } .timeline__date { min-width: 65px; position: absolute; left: 0; box-sizing: border-box; padding: .5rem 1.5rem; text-align: center; /* color box */ background-color: #008080; color: var(--uiTimelineSecondaryColor); } .timeline__day { font-size: 2rem; font-weight: 700; display: block; } .timeline__month { display: block; font-size: .8em; text-transform: uppercase; } .timeline__post { padding: 1.5rem 2rem; border-radius: 2px; /* color box text */ border-left: 3px solid #c39bd3; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 1px 2px 0 rgba(0, 0, 0, .24); background-color: var(--uiTimelineSecondaryColor); } @media screen and (min-width: 641px) { .timeline:before { left: 30px; } .timeline__group { padding-top: 55px; opacity: 1; } .timeline__box { padding-left: 80px; } .timeline__box:before { top: 50%; transform: translateY(-50%); } .timeline__date { top: 50%; margin-top: -27px; } } @media screen and (max-width: 640px) { .timeline:before { left: 0; } .timeline__group { padding-top: 40px; opacity: 1; } .timeline__box { padding-left: 20px; padding-top: 70px; } .timeline__box:before { top: 90px; } .timeline__date { top: 0; } } .timeline { --timelineMainColor: #4557bb; font-size: 16px; } /* ===== DEMO ===== */ @media (min-width: 768px) { html { font-size: 62.5%; } } @media (max-width: 767px) { html { font-size: 55%; } } body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Open Sans, Ubuntu, Fira Sans, Helvetica Neue, sans-serif; font-size: 1.6rem; color: # #008080; background-color: #f0f0f0; margin: 0; -webkit-overflow-scrolling: touch; overflow-y: scroll; display: flex; flex-direction: column; } p { margin-top: 0; margin-bottom: 1.5rem; line-height: 1.5; } p:last-child { margin-bottom: 0; } .page { max-width: 800px; padding: 10rem 2rem 3rem; margin-left: auto; margin-right: auto; order: 1; } </style> </HEAD> <BODY> <div class="page"> <div class="timeline"> <div class="timeline__group"> <div class="timeline__box"> <div class="timeline__date"> <span class="timeline__month">Day</span> <span class="timeline__day">1</span> </div> <div class="timeline__post"> <div class="timeline__content"> <p> test 1 </p> </div> </div> </div> </div> <div class="timeline__group"> <div class="timeline__box"> <div class="timeline__date"> <span class="timeline__month">Day</span> <span class="timeline__day">2</span> </div> <div class="timeline__post"> <div class="timeline__content"> <p> test 2 </p> </div> </div> </div> </div> <div class="timeline__group"> <div class="timeline__box"> <div class="timeline__date"> <span class="timeline__month">Day</span> <span class="timeline__day">3</span> </div> <div class="timeline__post"> <div class="timeline__content"> <p> test 3 </p> </div> </div> </div> </div> <div class="timeline__group"> <div class="timeline__box"> <div class="timeline__date"> <span class="timeline__month">Day</span> <span class="timeline__day">4</span> </div> <div class="timeline__post"> <div class="timeline__content"> <p> test 4 </p> </div> </div> </div> </div> <div class="timeline__group"> <div class="timeline__box"> <div class="timeline__date"> <span class="timeline__month">Day</span> <span class="timeline__day">5</span> </div> <div class="timeline__post"> <div class="timeline__content"> <p> test 5 </p> </div> </div> </div> </div> <div class="timeline__group"> <div class="timeline__box"> <div class="timeline__date"> <span class="timeline__month">Day</span> <span class="timeline__day">6</span> </div> <div class="timeline__post"> <div class="timeline__content"> <p> test 6 </p> </div> </div> </div> </div> <div class="timeline__group"> <div class="timeline__box"> <div class="timeline__date"> <span class="timeline__month">Day</span> <span class="timeline__day">7</span> </div> <div class="timeline__post"> <div class="timeline__content"> <p> test 7 </p> </div> </div> </div> </div> <div class="timeline__group"> <div class="timeline__box"> <div class="timeline__date"> <span class="timeline__month">Day</span> <span class="timeline__day">8</span> </div> <div class="timeline__post"> <div class="timeline__content"> <p> test 8 </p> </div> </div> </div> </div> <div class="timeline__group"> <div class="timeline__box"> <div class="timeline__date"> <span class="timeline__month">Day</span> <span class="timeline__day">9</span> </div> <div class="timeline__post"> <div class="timeline__content"> <p> test 9 </p> </div> </div> </div> </div> <div class="timeline__group"> <div class="timeline__box"> <div class="timeline__date"> <span class="timeline__month">Day</span> <span class="timeline__day">10</span> </div> <div class="timeline__post"> <div class="timeline__content"> <p> test 10 </p> </div> </div> </div> </div> <div class="timeline__group"> <div class="timeline__box"> <div class="timeline__date"> <span class="timeline__month">Day</span> <span class="timeline__day">11</span> </div> <div class="timeline__post"> <div class="timeline__content"> <p> test 11 </p> </div> </div> </div> </div> <div class="timeline__group"> <div class="timeline__box"> <div class="timeline__date"> <span class="timeline__month">Day</span> <span class="timeline__day">12</span> </div> <div class="timeline__post"> <div class="timeline__content"> <p> test 12 </p> </div> </div> </div> </div> <div class="timeline__group"> <div class="timeline__box"> <div class="timeline__date"> <span class="timeline__month">Day</span> <span class="timeline__day">13</span> </div> <div class="timeline__post"> <div class="timeline__content"> <p> test 13 </p> </div> </div> </div> </div> <div class="timeline__group"> <div class="timeline__box"> <div class="timeline__date"> <span class="timeline__month">Day</span> <span class="timeline__day">14</span> </div> <div class="timeline__post"> <div class="timeline__content"> <p> test 14 </p> </div> </div> </div> </div> <div class="timeline__group"> <div class="timeline__box"> <div class="timeline__date"> <span class="timeline__month">Day</span> <span class="timeline__day">15</span> </div> <div class="timeline__post"> <div class="timeline__content"> <p> test 15 </p> </div> </div> </div> </div> <div class="timeline__group"> <div class="timeline__box"> <div class="timeline__date"> <span class="timeline__month">Day</span> <span class="timeline__day">16</span> </div> <div class="timeline__post"> <div class="timeline__content"> <p> test 16 </p> </div> </div> </div> </div> </div> </div> <script> var $animation_elements = $('.timeline__box'); var $window = $(window); function check_if_in_view() { var window_height = $window.height(); var window_top_position = $window.scrollTop(); var window_bottom_position = (window_top_position + window_height); $.each($animation_elements, function() { var $element = $(this); var element_height = $element.outerHeight(); var element_top_position = $element.offset().top; var element_bottom_position = (element_top_position + element_height); //check to see if this current container is within viewport if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) { $(this).animate({ 'opacity': '1' }, 500); } }); } $window.on('scroll resize', check_if_in_view); $window.trigger('scroll'); </script> </BODY> </HTML>

1 个解决方案

解决方案1
 0 已采纳  2020-03-31 12:38:51

这不适用于 sublime、notepad ++ 或任何其他在您的浏览器中打开输出的 IDE（而不是像Jsfiddle这样的在线平台那样在框架中），直到您不写

<!DOCTYPE html>

因为没有这个你的$window.height()将无法正常工作

var window_height = $window.height();

这将为您提供整个可滚动内容的价值。

并且当您滚动时，所有具有时间轴__box类的元素的不透明度变为 1

如图所示

//check if this current container is within view
    if ((element_bottom_position >= window_top_position) &&
      (element_top_position <= window_bottom_position)) {
      $(this).animate({'opacity':'1'},500);
    } else {
          $(this).animate({'opacity':'0'},500);
      }

如果您滚动一点， check_if_in_view()函数会多次调用，并且当您添加 500 毫秒的延迟时，它会长时间保持不透明度为 1。 如果您在开始闪烁的元素下方应用代码，将很容易理解。 因此它不会工作

//check if this current container is within view
        if ((element_bottom_position >= window_top_position) &&
          (element_top_position <= window_bottom_position)) {
          $(this).animate({'opacity':'1'},500);              
          $(this).animate({'opacity':'0'},500);
          }

我希望你会明白

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 在jQuery中使用悬停淡入和淡出元素 jQuery淡入，一起淡出一些元素 表单元素在选定选项上使用jQuery淡出 jQuery-创建后淡出元素 淡出页面上没有jquery的元素 jQuery淡入活跃元素，淡出不活跃元素 jQuery淡入，淡出，淡入2 jQuery淡入淡出 淡出元素然后淡入选中 幻灯片：在JQuery上淡入和淡出
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM