Question

我正在尝试更有效地编写此代码。我尝试了大约25种不同的排列，它似乎只是打破了它。

基本上，我正在向元素添加各种类，以在窗口宽度为1025px或更大时触发css /关键帧动画。

然后还有另一个类在小于1024px时添加，用于显示没有元素的元素。

<script  type="text/javascript">
    var width = $(window).width();
    if(width >= 1025) {
    $(window).scroll(function() {
        $('#about .image img.flex').each(function() {
            var position = $(this).offset().top;
            var top = $(window).scrollTop();
            if (position < top+600) { $(this).addClass("slideLeft"); }
        });
        $('#author .image img.flex').each(function() {
            var position = $(this).offset().top;
            var top = $(window).scrollTop();
            if (position < top+600) { $(this).addClass("slideRight"); }             
        });
        $('#feed .blog_01').each(function() {
            var position = $(this).offset().top;
            var top = $(window).scrollTop();
            if (position < top+600) { $(this).addClass("oneUp"); }
        });
        $('#feed .blog_02').each(function() {
            var position = $(this).offset().top;
            var top = $(window).scrollTop();
            if (position < top+600) { $(this).addClass("twoUp"); }
        });
        $('#feed .blog_03').each(function() {
            var position = $(this).offset().top;
            var top = $(window).scrollTop();
            if (position < top+600) { $(this).addClass("thrUp"); }
        });
        $('#feed .more').each(function() {
            var position = $(this).offset().top;
            var top = $(window).scrollTop();
            if (position < top+1000) { $(this).addClass("moreUp"); }
        });
    });
} 
else { 
    $('#about .image img.flex').addClass('visible'); 
    $('#author .image img.flex').addClass('visible'); 
    $('#feed .blog_01').addClass('visible');
    $('#feed .blog_02').addClass('visible');
    $('#feed .blog_03').addClass('visible');
    $('#feed .more').addClass('visible');
    }       
</script>

修改

也许将它想象成这样更好：

也许最好还是说如何才能让这部分更有效......

var width = $(window).width();
    if(width >= 1025) {
    $(window).scroll(function() {
    $('#about .image img.flex').each(function() {
        var position = $(this).offset().top;
        var top = $(window).scrollTop();
        if (position < top+600) { $(this).addClass("slideLeft"); }
    });
    $('#author .image img.flex').each(function() {
        var position = $(this).offset().top;
        var top = $(window).scrollTop();
        if (position < top+600) { $(this).addClass("slideRight"); }             
    });
    $('#feed .blog_01').each(function() {
        var position = $(this).offset().top;
        var top = $(window).scrollTop();
        if (position < top+600) { $(this).addClass("oneUp"); }
    });
    $('#feed .blog_02').each(function() {
        var position = $(this).offset().top;
        var top = $(window).scrollTop();
        if (position < top+600) { $(this).addClass("twoUp"); }
    });
    $('#feed .blog_03').each(function() {
        var position = $(this).offset().top;
        var top = $(window).scrollTop();
        if (position < top+600) { $(this).addClass("thrUp"); }
    });
    $('#feed .more').each(function() {
        var position = $(this).offset().top;
        var top = $(window).scrollTop();
        if (position < top+1000) { $(this).addClass("moreUp"); }
    });'

Answer 1

警告，直接在滚动事件上触发动画不是动画的有效方式。其他人写的比我说的要多得多。当你说＆＃34;有效＆＃34;时，我在这里假设你的意思是更短，更容易阅读。

你可以尝试这样的事情，抱歉我没有转移你的课程。

$(window).scroll(function() {
  var top = $(window).scrollTop();
  $('.all, .the, .selectors, .belong, .to, .us').each(function(e) {
    var position = $(this).offset().top;
    if ($(this).hasClass('.all') && position < top+1000) {
      $(this).addClass('.slideThisClass');
    }
    else if($(this).hasClass('.the') && position < top+600) {
      $(this).addClass('.theOtherSlideClass');
    }
    // etc.
  }
}

Answer 2

@icicleking的答案看起来非常棒，但如果您需要保留addClasses，则可以迭代重要值。

DEMO

var width = $(window).width();

// Make an array of data objects
var data = [
  { el: '#about .image img.flex', plus: 600, newClass: "slideLeft" },
  { el: '#author .image img.flex', plus: 600, newClass: "slideRight" },
  { el: '#feed .blog_01', plus: 600, newClass: "oneUp" },
  { el: '#feed .blog_02', plus: 600, newClass: "twoUp" },
  { el: '#feed .blog_03', plus: 600, newClass: "thrUp" },
  { el: '#feed .more', plus: 1000, newClass: "moreUp" }
];

if(width >= 1025) {
  $(window).scroll(function() {
    // Loop over the array of data objects
    data.forEach(function(d) {
      // For each object, target the el attribute for more looping...
      $(d.el).each(function() {
        var position = $(this).offset().top;
        var top = $(window).scrollTop();
        // ...use the plus attribute in this condition...
        if (position < (top + d.plus)) {
          // ...and add the newClass attribute
          $(this).addClass(d.newClass); }
      });
    });
  });
} else { 
  data.forEach(function(d) {
    $(d.el).addClass('visible');
  });
}

这个jQueryJjavaScript片段可以更有效地重写吗？

2 个答案: