Question

我有一个动画的图标序列（http://codepen.io/Dingerzat/pen/XNjzVr），我想在图标滚动到用户视图时激活它们。我发现了一些代码，我认为这就是我需要的代码：Trigger event when user scroll to specific element - with jQuery

我尝试将它与我的代码合并在一起。虽然它似乎不起作用，我不知道为什么。它似乎也崩溃了建设者。任何建议都将不胜感激。

HTML

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Delayed image load in</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/css/materialize.min.css" rel="stylesheet"/>
</head>
<style>

</style>
<body>
  <div class="red"></div>
  <div id="gallery scroll-to">
    <a href="#" data-click=".collapsible .collapsible-header:eq(0)"><img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon1.png" id="float" alt="" width="125" /></a>
    <a href="#" data-click=".collapsible .collapsible-header:eq(1)"><img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon2.png" id="float" alt="" width="125" /></a>
    <a href="#" data-click=".collapsible .collapsible-header:eq(2)"><img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon3.png" id="float" alt="" width="125"/></a>
    <a href="#" data-click=".collapsible .collapsible-header:eq(3)"><img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon4.png" id="float" alt="" width="125"/></a>
    <a href="#" data-click=".collapsible .collapsible-header:eq(4)"><img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon5.png" id="float" alt="" width="125"/></a>
    <a href="#" data-click=".collapsible .collapsible-header:eq(5)"><img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon6.png" id="float" alt="" width="125"/></a>
    <a href="#" data-click=".collapsible .collapsible-header:eq(6)"><img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon7.png" id="float" alt="" width="125"/></a>
    <img src="" alt="" />
    <img src="" alt="" />
    <img src="" alt="" />
  </div>
  <br><br>
  <div>
    <ul class="collapsible" data-collapsible="accordion">
        <li>
            <div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Gah</div>
            <div class="collapsible-body">
                <p>Hello StackOverflow! SO's da' bomb diggidy!</p>
            </div>
        </li>
        <li>
            <div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Second</div>
            <div class="collapsible-body">
                <p>Why is the person who invests your money called a broker?</p>
            </div>
        </li>
        <li>
            <div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Third</div>
            <div class="collapsible-body">
                <p>I'd like to <a href="#" data-click=".collapsible .collapsible-header:first">open the First collapsible element</a> in this list.</p>
            </div>
        </li>
      <li>
            <div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Forth</div>
            <div class="collapsible-body">
                <p>I'd like to in this list.</p>
            </div>
        </li>
      <li>
            <div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Forth</div>
            <div class="collapsible-body">
                <p>I'd like to in this list.</p>
            </div>
        </li>
      <li>
            <div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Forth</div>
            <div class="collapsible-body">
                <p>I'd like to in this list.</p>
            </div>
        </li>
      <li>
            <div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Forth</div>
            <div class="collapsible-body">
                <p>I'd like to in this list.</p>
            </div>
        </li>
    </ul>
</div>
</body>
</html>

CSS

@import "compass/css3";

.red {
    height:800px;
    background:red;
}

body { background: #e6e6e6; } 
#gallery { width:90%; 
  img { margin:1px; display: none; } 
} 

#float{
position: relative;
-webkit-animation: floatBubble 2s;
  animation-fill-mode: forwards;  
  }


@-webkit-keyframes floatBubble{
 0%{
        top:0;
        -webkit-animation-timing-function: ease-in;

   }


   33% {
      top: 50px;
      -webkit-animation-timing-function: ease-out;
   }
  66%{
        top:25px;
        -webkit-animation-timing-function: ease-in;

   }

  100%{
        top:50px;
        -webkit-animation-timing-function: ease-in;

   }

}

JS

$(window).scroll(function() {
   var hT = $('#scroll-to').offset().top,
       hH = $('#scroll-to').outerHeight(),
       wH = $(window).height(),
       wS = $(this).scrollTop();
    console.log((hT-wH) , wS);
   if (wS > (hT+hH-wH)){
    $('#gallery img').each(function(i) {
  $(this).delay(i*200).fadeIn(3000);
});


$('[data-click]').on('click', function (e) {
    $( $(this).data('click') ).trigger('click');
});

Answer 1

首先，您需要将cell.imageURLString ID更改为类名，因为您在HTML上多次使用它，并且ID必须是唯一的。

然后使用代码在您到达float元素时触发事件：

gallery

用户滚动到特定部分时触发动画

1 个答案:

Codepen Demo