Исчезать элементы по одному jQuery - PullRequest
Новая
       8

Исчезать элементы по одному jQuery

0 голосов
/ 25 мая 2018

Я пытаюсь получить эффект исчезающих элементов по одному при прокрутке вниз.Я нашел хороший учебник в Интернете, прошел его и получил следующий jQuery: 

  $(document).on("scroll", function () {
  var pageTop = $(document).scrollTop()
  var pageBottom = pageTop + $(window).height()
  var tags = $(".fadeIn")

    for (var i = 0; i < tags.length; i++) {
    var tag = tags[i]

    if ($(tag).position().top < pageBottom) {
      $(tag).addClass("visible")
    } else {
      $(tag).removeClass("visible")
    }
  }
})

Мой HTML выглядит следующим образом: 

<html>

<head>

<link rel="icon" 
  type="image/png" 
  href="pawsplash3.png">

<link rel="stylesheet" 
href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<link href="https://fonts.googleapis.com/css?family=Luckiest+Guy" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan|Dosis|Indie+Flower" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Cabin+Sketch" rel="stylesheet">

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css">

<link rel="stylesheet" type="text/css" href="portfolio.css">

<script src="portfolio.js"></script>

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-transition/1.1.1/d3-transition.js"></script>

<script src="portfolio.js"></script>



</head>

<body>
<!-- ===================================================================================== -->

<nav class="navbar navbar-expand-lg navbar-light fixed-top">
<a class="navbar-brand" href="#">
 <img class="splashIcon" src="pawsplash3.png">

</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
</ul>
<ul class="navbar-nav">
  <li class="nav-item rightBorder">
    <a class="nav-link text-left" href="#tech-banner">What I do</a>
  </li>
  <li class="nav-item rightBorder">
    <a class="nav-link text-left" href="#jumpToProjects">Projects</a>
  </li>
  <li class="nav-item">
    <a class="nav-link text-left" href="mailto:coolkatweb@gmail.com">Contact</a>
  </li>

  </ul>
 </div>
</nav>
<div class="container">

<div class="jumbotron header monster">


  <h1 class="text-center">COOL KAT</h1>

</div>

<div class="row">

    <img class="mr-cool img-responsive" src="waterCat.png">

</div>

  </div>

<div class="row text-center tag-line">

<div class="col-lg-1 text-center"></div>

<div class="col-lg-2 tagLine text-center">Simple</div>

<div class="col-lg-2 text-center">

<img src="green-line.png" class="sketch-lines">

</div>



<div class="col-lg-2 tagLine text-center">Striking</div>

<div class="col-lg-2 text-center">

<img src="purple-line.png" class="sketch-lines">

</div>

<div class="col-lg-2 tagLine text-center">Cool</div>

<div class="col-lg-1 text-center"></div>

</div>




<img class="thinSplash fadeIn" src="lineSplash.png">




  <div class="row text-center skills fadeIn">


    <div class="col-md-4 skill"><img class="skill-img" src="https://cdn0.iconfinder.com/data/icons/HTML5/512/HTML_Logo.png">


      <p id="jumpToSkills">...</p>

    </div>



    <div class="col-md-4 skill"><img class="skill-img" src="https://firebearstudio.com/blog/wp-content/uploads/2015/03/The-Best-CSS-Frameworks.png">

                <p>...</p>

    </div>

    <div class="col-md-4 skill"><img class="skill-img" 
src="https://jdwilson.ca/static/img/logos/js.svg">

      <p>... </p>

    </div>

  </div>


<div class="jumbotron portfolio fadeIn">

<h2 class="text-center projects fadeIn" id="jumpToProjects">My projects...</h2>

<div class="row project-pics fadeIn">

<div class="col-lg-4 text-center project-thumb one fadeIn"><a target="_blank" class="project-link" href="#">
  <div class="stripe">Coming soon

    <p class="down-arrow fadeIn"><i class="fas fa-chevron-down arrow"></i></p>

  </div></a>
</div>

<div class="col-lg-4 text-center project-thumb two fadeIn"><a target="_blank" class="project-link" href="#"><div class="stripe">Coming soon
  <p class="down-arrow fadeIn"><i class="fas fa-chevron-down arrow"></i></p>

  </div></div>

 <div class="col-lg-4 text-center project-thumb three fadeIn"><a target="_blank" class="project-link" href="#"><div class="stripe">Coming soon

  <p class="down-arrow fadeIn"><i class="fas fa-chevron-down arrow"></i></p>

  </div></div>

 </div>

</div>

<div class="container fadeIn">

<div class="row">


  <div class="col-sm-4 social text-center fadeIn"><a target="blank" 
href="https://twitter.com/Cool_Kat_Web"><img class="smIcon" src="https://cdn1.iconfinder.com/data/icons/pen-sketch-icons-set/256/social_media_icons_pen_sketch_icons_set_256x256_0002_twitter.png"></a></div>

  <div class="col-sm-4 social text-center fadeIn"><a target="blank" 
href="https://www.facebook.com/Cool-Kat-Web-Design-195865604380398/notifications/"><img class="smIcon" src="https://www.shareicon.net/download/2015/09/18/103173_media.ico"></a></div>

  <div class="col-sm-4 social text-center fadeIn"><a 
href="mailto:coolkatweb@gmail.com"><img class="smIcon" src="https://www.shareicon.net/download/2015/09/18/103164_media_256x256.png"></a></div>

</div>

</div>

<div class="text-center foot fadeIn">   &copy; Cool Kat Web Design 2018</div>

  <script>

$(".stripe").mouseover(function() {
$(this).css("height","100%").css("padding-top","150px");
})

$(".stripe").mouseleave(function() {
$(this).css("height","70px").css("padding-top","10px");
});

</script>
</body>

</html>

И соответствующий CSS: 

.fadeIn {
opacity: 0;
transform: translate(0, 20px);
transition: all 5s;
}

.fadeIn.visible {
opacity: 1;
transform: translate(0,0);
}

Великолепные переходы и переходы прекрасно работают, за исключением того, что они работают на всех элементах этого класса одновременно.Я думал, что с циклом это будет работать на каждом элементе отдельно, так как вы прокручиваете свой внешний вид один за другим.Не уверен, что здесь не так

...