Как выполнить сценарий J Query только после того, как предыдущий был выполнен?

Question

Я хочу изменить изображение после того, как пользователь прокрутит его, чтобы при повторном прокрутке вверх появилось новое изображение.Затем я хочу вернуть изображение обратно к оригиналу после того, как пользователь прокрутит мимо измененного изображения, чтобы при повторном просмотре старого изображения оно было.Я хочу, чтобы это повторялось бесконечно.

Я пытаюсь запрограммировать простую веб-страницу так, чтобы div с изображением (определяемым css) изменялось на другое изображение после прокрутки пользователем, а затем возвращался назадк исходному изображению, когда пользователь снова прокрутил мимо измененного изображения.Я намерен повторять это каждый раз, когда пользователь прокручивает страницу вверх, чтобы увидеть исходное изображение, а затем отступает.

скрипт скрипта здесь: https://jsfiddle.net/flixc3/hgjy86zm/9/#&togetherjs=wmliLo5BIP

Я могу получитьизображение изменить, но не вернуть.

$(function(){
    $(window).scroll(function() {
        var scroll = $(window).scrollTop(); // how many pixels you've scrolled
        var os = $('#div1').offset().top; // pixels to the top of div1
        var ht = $('#div1').height(); // height of div1 in pixels
        // if you've scrolled further than the top of div1 plus it's height
        // change the color. either by adding a class or setting a css property
        if(scroll > os + ht){
            $('#div1').removeClass('english').addClass('japanese');
        }
    });
});
		
	  $(function(){
    $(window).scroll(function() {
        var scroll2 = $(window).scrollTop(); // how many pixels you've scrolled
        var os2 = $('#div1').offset().top; // pixels to the top of div1
        var ht2 = $('#div1').height(); // height of div1 in pixels
        // if you've scrolled further than the top of div1 plus it's height
        // change the color. either by adding a class or setting a css property
        if(scroll2 > os2 + ht2){
            $('#div1').removeClass('japanese').addClass('english');
        }
    });
});

Answer 1

Вы дважды вызывали одну и ту же функцию прокрутки, но, тем не менее, вы проверяете одну и ту же вещь.Условие такое же.

$(function(){
    $(window).scroll(function() {
        var scroll2 = $(window).scrollTop(); // how many pixels you've scrolled
        var os2 = $('#div1').offset().top; // pixels to the top of div1         
        var ht2 = $('#div1').height(); // height of div1 in pixels
        // if you've scrolled further than the top of div1 plus it's height
        // change the color. either by adding a class or setting a css property
        if(scroll2 > os2 + ht2){
            $('#div1').removeClass('english').addClass('japanese');
        }else{
            $('#div1').removeClass('japanese').addClass('english');
        }
    });
});

Добавьте код, который вы использовали для восстановления изображения, внутри.