Question

我正在使用waypoints.js制作动画，我有以下工作

$(document).ready(function(){
  "use strict"; 
    $('.slogan').waypoint(function(direction) {             
        $('.onelogo').toggleClass('hide', direction === 'down');
    });
});

但上面唯一的问题是动画仍在手机上播放，所以看完之后我试图实现以下

$(document).ready(function(){
    $(window).resize(function () {
        width=$(window).width();
        if (width > 950){
            var waypoints = document.querySelectorAll('.slogan');
            for (var i = waypoints.length - 1; i >= 0; i--) {
                var waypoint = new Waypoint({
                    element: waypoints[i],
                    handler: function(direction) {
                        this.element.classList.toggle('.hide');
                    },
                    offset: '60%',
                });
            }
        } else {
            // less then 950 px.
            if ($(".onelogo").hasClass(".hide")) {
                $(".onelogo").removeClass(".hide"); 
            }
        }
    });
});

但这样做动画根本不会播放

HTML

<div class="slogan">        
        <img class="onelogo" src="http://via.placeholder.com/350x150">
</div>

CSS

.slogan {
    display: block;
    position: absolute;
    right: 10%;
    top: 40%;
    line-height: 34px;
    color: #949494;
    z-index: 10;
}

.onelogo {
    display: block;
    height: 110px;
    width: auto;
     -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}       

.hide {
  opacity: 0;
  margin-top: -29vh;
}

Answer 1

最简单的方法是在$(document).ready()上添加航点，并根据窗口大小调用航点enable / disable。

<script>
var waypoint;
function handleWayPoint() {
    var $width = $(window).width();
    console.log($width);
    if($width > 950) {
      waypoint[0].enable();
    }
    else {
        waypoint[0].disable();
    }
  }

$(document).ready(function(){
  "use strict";
   waypoint= $('.slogan').waypoint(function(direction) {             
         $('.onelogo').toggleClass('hide', direction === 'down');
   });
   handleWayPoint();

   $(window).resize(function() {
      handleWayPoint();
   });
});
</script>

除了我在评论中提到的错误之外，其他代码的主要问题是这一行：JavaScript中的this.element.classList.toggle('.hide'); this与其他语言的工作方式完全不同（Java，C ++）例如）。通常，JavaScript中的this设置为点运算符左侧的对象（尽管有例外）。 This post goes into greater detail.

Here is a fiddle

Answer 2

我不熟悉航点，但您可以尝试将逻辑包装在一个函数中，然后在$(document).ready和$(window).resize上调用它：

function toggleAnimation(){
    width=$(window).width();

    if (width > 950){
    var waypoints = document.querySelectorAll('.slogan');
        for (var i = waypoints.length - 1; i >= 0; i--) {
            var waypoint = new Waypoint({
                element: waypoints[i],
                handler: function(direction) {
                    this.element.classList.toggle('.hide');
                },
                offset: '60%',
            });
         }
    } else {
       // less then 950 px.
       if ($(".onelogo").hasClass(".hide")) {
           $(".onelogo").removeClass(".hide"); 
       }

    }
}

并致电...

$(document).ready(function(){
    toggleAnimation();

    $(window).resize(function(){
        toggleAnimation();
    }); 
})

Answer 3

当屏幕尺寸小于950像素时，你喜欢停止动画吗？我不知道，但我认为你可以试试这个：

var waypoints = null;
$(document).ready(function() {
    $(window).resize(function () {
        width=$(window).width();
        if (width > 950) {
            ...
        } else if (waypoints != null) {
            waypoints.disable() //or waypoints.destroy() if new instance
        }
    });
});

根据屏幕大小禁用动画

3 个答案: