jQuery анимация при прокрутке не перемещает элемент влево / вправо

Question

у меня 3 раздела. Каждый раздел имеет свою высоту. JSFiddle в конце вопроса.

GOAL : я хочу, чтобы img (изображение ракеты) следовало за пользователем, когда он прокручивал, и изменял позиции (слайд) справа налево когда он прокручивает мимо секции.

Мне удалось заставить ракету следовать за мной, когда я прокручивал вниз. Теперь я хочу, чтобы ракета скользила влево, когда я прохожу первый участок, а затем сдвигаюсь назад вправо, когда я прохожу второй участок.

Ракета вращается, когда пользователь прокручивает секцию. Это прекрасно работает! Но когда я хочу, чтобы он переместился на другую сторону, он работает только слева. Я не могу получить его до go вправо Вот часть jQuery для перемещения ракеты:

$(document).scroll(function() {

  var scrollIs = $(window).scrollTop();
  console.log("I've scrolled: ", scrollIs);

  if($(window).scrollTop() >= topOfSecondSection - 230){  //passed first section
    $(".rocket").css('transform', 'rotate(50deg)'); //turn rocket WORKS
    //$(".rocket").css('left', '10px'); //JUMP CUTS THE ROCKET TO LEFT SIDE, DOESN'T SLIDE/MOVE IT
    $(".rocket").stop().animate({ "left": "10px"}, 100); //ISN'T INSTANT-SMOOTH

    $("#first-section").css("background","red");
    $("#second-section").css("background","blue");
    $("#third-section").css("background","orange");
  }
  if($(window).scrollTop() >= topOfThirdSection - 150){     //passed second section
    $(".rocket").css('transform', 'rotate(1deg)'); //turns rocket back to look straight WORKS
    //$(".rocket").css('right', '10px'); //move rocket right DOESNT'T MOVE
    $(".rocket").stop().animate({ "right": "10px"}, 100); //DOESN'T MOVE

    $("#first-section").css("background","purple");
    $("#second-section").css("background","yellow");
    $("#third-section").css("background","brown");
  }

  //DEFAULT
  if($(window).scrollTop() < s1Height){
  //return to normal
    $(".rocket").css('transform', 'rotate(1deg)'); //WORKS
    //$(".rocket").css('right', '10px'); //DOESN'T MOVE
    $(".rocket").stop().animate({ "right": "10px"}, 100); //DOESN'T MOVE

    $("#first-section").css("background","green");
    $("#second-section").css("background","grey");
  }
});

---

Вот JSFiddle: https://jsfiddle.net/prozik/d7g3wtye/101/

РЕДАКТИРОВАТЬ:

Когда я создаю в CSS:

.moveLeft {
  left: 10px;
}

.moveRight {
  right: 10px;
}

А потом в jQuery я делаю:

$(".rocket").removeClass("moveLeft");
$(".rocket").addClass("moveRight");

Работает. Перемещает элемент вправо / влево. Но он мигает ракетой в положении. Мне нужно, чтобы он переместился на другой слайд.

JSFiddlle: https://jsfiddle.net/prozik/d7g3wtye/113/

Answer 1

Вот одно решение, которое я обнаружил.

Я добавил left: 570px к классу ракеты в CSS, а затем, когда я вызываю класс moveLeft, он перемещает ракету:

    .rocket {
    display: block;
    height: 150px;
    max-width: 100%;
    position: absolute;
    left: 570px; /*THIS*/
    opacity: 1;
    transition: all 0.5s ease-out;
    /* transform: translate(-10%, 100%); */
    z-index: 10;
}

.moveLeft {
  left: 10px;
}

.moveRight {
  right: 10px;
}

Решение: https://jsfiddle.net/prozik/d7g3wtye/122/

Answer 2

Все, что вам нужно сделать, это сбросить соответствующее свойство 'right' или 'left' при изменении последнего. Свойства 'left' и 'right' CSS различаются, поэтому если вы не сбросите одно из них, другое будет проигнорировано.

Вы можете сделать это, используя значение "intial" для свойства 'left' и 'right':

$('.rocket').css('left', 'initial');

JS:

$(document).scroll(function() {

  var scrollIs = $(window).scrollTop();
  console.log("I've scrolled: ", scrollIs);

  if($(window).scrollTop() >= topOfSecondSection - 230){  //passed first section
    $(".rocket").css('transform', 'rotate(50deg)'); //turn rocket
    //$(".rocket").css('left', '10px'); //move rocket left
        $('.rocket').css('left', 'initial');
    $(".rocket").stop().animate({ "right": "10px"}, 100);

    $("#first-section").css("background","red");
    $("#second-section").css("background","blue");
    $("#third-section").css("background","orange");
  }
  if($(window).scrollTop() >= topOfThirdSection - 150){     //passed second section
        $(".rocket").css('transform', 'rotate(1deg)'); //turn rocket
    $('.rocket').css('right', 'initial');
    //$(".rocket").css('right', '10px'); //move rocket right
    $(".rocket").stop().animate({ "left": "10px"}, 100);

    $("#first-section").css("background","purple");
    $("#second-section").css("background","yellow");
    $("#third-section").css("background","brown");
  }
/*   if($(window).scrollTop() > s3Height - 30){
    //passed third section
    $(".rocket").css('left', '10px');
    $("#first-section").css("background","green");
    $("#second-section").css("background","pink");
    $("#third-section").css("background","orange");
  } */

  if($(window).scrollTop() < s1Height){
  //return to normal
    $(".rocket").css('transform', 'rotate(1deg)');
    //$(".rocket").css('right', '10px');
        $('.rocket').css('right', 'initial');
    $(".rocket").stop().animate({ "left": "10px"}, 100);

    $("#first-section").css("background","green");
    $("#second-section").css("background","grey");
  }
});

JSFiddle: https://jsfiddle.net/d59jymfv/