jquery - 根据屏幕尺寸禁用动画

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>

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

Here is a fiddle