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

Question

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

基本上，当窗口宽度为 1025 像素或更大时，我向元素添加各种类以触发 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

@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');
  });
}