Question

我尝试过不同的网站甚至尝试解码航点指南，但没有运气。我似乎无法使用滚动功能来使用以下代码。（参考：http://blog.robamador.com/using-animate-css-jquery-waypoints/）

任何帮助将不胜感激。

<!doctype html><html><head><link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.0/animate.min.css">

<style>
img {
margin:1000px 0;
display:block;

}

</style>

<script>
//Animate from top
$('.animated').waypoint(function() {
$(this).toggleClass($(this).data('animated'));
},
{ offset: 'bottom-in-view' });
//Animate from bottom
 $('.animated').waypoint(function() {
 $(this).toggleClass($(this).data('animated'));});
 </script>

<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<img class="animated" data-animated="fadeInLeft" src="http://placekitten.com/g/200/300">
<img class="animated" data-animated="bounce" src="http://placekitten.com/g/200/300">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.4/waypoints.min.js">   </script>
</body>
</html>

Answer 1

首先，将jQuery脚本和Waypoint脚本包含在HEAD标记中。在99％的情况下，这是在您的DOM中包含javascript库的正确方法。

第二件事：你在HEAD标签中编写你的javascript代码（它是正确的），但没有“开始控制”。在您的情况下，浏览器在读取其余DOM之前开始执行您的javascript代码，因此它无法在正确的元素（具有“动画”类的图像）上附加事件，因为它尚未读取它们。简而言之，当浏览器开始读取您的SCRIPT标签时，它不知道“.animated”是谁，所以它什么都不做。

有两种方法可以解决您的问题：

1 - 将您的SCRIPT标记及其内容移至BODY标记的末尾。

2 - 将您的javascript代码包装在DOM.ready状态中，如：

<script>
        $(document).ready(function() {

            //Animate from top
            $('.animated').waypoint(function() {
                $(this).toggleClass($(this).data('animated'));
            }, {
                offset : 'bottom-in-view'
            });

            //Animate from bottom
            $('.animated').waypoint(function() {
                $(this).toggleClass($(this).data('animated'));
            });
        });
    </script>

老实说，我更喜欢选项编号2. = D

FadeinLeft图像滚动Waypoint

1 个答案: