动画偏移不起作用

时间:2018-08-06 15:17:31

标签: javascript jquery twitter-bootstrap jquery-waypoints

我正在尝试在代码中添加获取动画,使其在id前发射70px

任何人都知道如何实现这一目标?我正在使用Bootstrap运行JQuery和Waypoint。

$(document).ready(function(){
 
  $('#element-to-animate-left').css('opacity', 0);
 
  $('#element-to-animate-left').waypoint(function() {
      $('#element-to-animate-left').css('opacity', 1);
      $('#element-to-animate-left').addClass('slideInLeft');
  }, { offset: "70" });
 

 
  $('#element-to-animate-right').css('opacity', 0);
 
  $('#element-to-animate-right').waypoint(function() {
      $('#element-to-animate-right').css('opacity', 1);
      $('#element-to-animate-right').addClass('slideInRight');
  }, { offset: "70" });
 
});
.strategic-marketing-header {
    margin-top:12rem;
}
.strategic-marketing-paragraph {
    padding:4rem 2rem 5rem 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>

<section class="section-what-is-strategic-marketing">
        <div class="container">
            <div class="row">
                <div class="col-lg-7" id="element-to-animate-left">
                    <h2 class="header-h3 strategic-marketing-header">What Is Strategic Marketing?</h2>
                    <p class="paragraph strategic-marketing-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
                <div class="col-lg" id="element-to-animate-right">
                    <div class="image-box">
                        <img class="centered-image" src="resources/img/index/strategic-marketing.png" alt="Strategic Marketing Graphs">
                    </div>
                </div>
            </div>    
        </div>
    </section>

0 个答案:

没有答案