execute jquery function for each element containing class

Question

The below function mostly works - it moves the backgrounds as I need, however I would like the function to run on any element with a class of "animate", rather than having to call each element down the bottom. I tried $('.animate').load(function(){}; but it just wont work... Thanks

JAVASCRIPT

$(window).load(function(){
(function(){
      $.fn.move = function(){
            var $this = $(this);
            var offset = $this.offset().top;
            var start = 0;
            var end = offset + $this.height();
            var speed = $this.attr("speed");
            return this.each(function(){
                  $(window).bind('scroll', function() {
                       var windowPos = $(window).scrollTop();
                        if((windowPos >= start) && (windowPos <= end)) {
                              var newCoord = windowPos * speed;
                              $this.css({'background-position': '0 '+ newCoord + 'px'});
                        };
                  });
            });
      };
})(jQuery);

$('.animate').move();
});

HTML

<div class="welcome_6"></div>
    <div class="welcome_5"></div>
    <div class="welcome_4"></div>
    <div class="welcome_3"></div>
    <div class="welcome_2 animate" speed="-1"></div>
    <div class="welcome_1 animate" speed="0"></div>

EDIT : When I scroll the page the elements move according to the scroll location. Each element moves at a different speed (set as html attribute). This code moves them all at the same speed.. I'm assuming the $('.animate') should be somewhere up the top replacing the $.fn.move but i cant figure it out..

Answer 1

应该是$('.animate')而不是$('animate')请注意查询开始处的点，该点告诉jQuery您正在寻找类。

Answer 2

I think the issue is with the way you are using the immediately invoked function inside the load function and you are passing in jQuery at the bottom and not into the immediately invoke function. This will update the background position as long as you script tag is placed after the jquery script tag

Here is a link to js fiddle:

UPDATE: https://jsfiddle.net/kriscoulson/pnrx34wp/1/

I do not have your exact code for styling so I improvised but if you inspect the elements the background position is being updated;

AND UPDATE :

 $.fn.move = function() { var $this = $(this); var offset = $this.offset().top; var start = 0; var end = offset + $this.height(); return this.each(function(index, element) { var $element = $(element); var speed = $element.attr("speed"); $(window).bind('scroll', function() { var windowPos = $(window).scrollTop(); if ((windowPos >= start) && (windowPos <= end)) { var newCoord = windowPos * speed; $element.css({ 'background-position': '0 ' + newCoord + 'px' }); }; }); }); }; $(document).ready(function() { $('.animate').move(); }); 

EDIT: Your 'this' binding was off and your speed was declared outside of the this.each