stackoom
  简体   繁体   中英

Fade in and out elements with jquery

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

Question

Right now Im having two issues with the code that Im not able to fix:

1) In jsfiddle the items fade in when scrolling down, but when I try it with sublime (or notepad ++) the fade in only works when refreshing the page and on scroll-up.

2) For the fade out I tried to add this part to the code but its no working. What is worse its actually breaking the first fade in (this issue happens in both jsfiddle and local)

 //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/

(For the moment I'm doing everything in the html itself)

The code: 

 <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 answers

solution1
 0 ACCPTED  2020-03-31 12:38:51

This will not work on sublime, notepad ++ or any other IDE which opens output in you browser (not in frame like online platforms like Jsfiddle ) until you don't write

<!DOCTYPE html>

because without this your $window.height() will not work properly

var window_height = $window.height();

This will give you the value of whole scrollable content.

and also when you scroll all over, the opacity of all the elements having class timeline__box become 1

As shown in image

//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);
      }

If you scroll a little bit, check_if_in_view() function called over multiple time and as you added a delay of 500 ms There for it will remain at opacity of 1 for long time. It will be easy to understand if you apply code below the elements starts blinking . Therefore it will not work

//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);
          }

I hope you will understand

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Fade in and fade out elements with hover in jQuery Jquery fade in, fade out some elements together form elements fade out with jQuery on selected option JQuery - Fade Out Elements After Being Created Fade out elements on page without jquery jQuery fade in active element, fade out inactive elements jquery Fade In, Fade Out, Fade In 2 Jquery Fade in Fade out Fade out elements then fade in selected Slideshow: Fade in and Fade out on JQuery
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM