JQuery оживить обратный вызов в ближайшее время - PullRequest
Новая
       19

JQuery оживить обратный вызов в ближайшее время

0 голосов
/ 17 октября 2018

У меня есть простая анимация jquery, где я экспериментирую.Это своего рода игровой автомат с двумя контейнерами.

Что я пытаюсь создать, так это то, что когда вы нажимаете кнопку (контейнер A на экране, статический): контейнер A скользит вверх по экрану с контейнером B, следующим за ним.Затем, когда анимация закончена.Я хочу сбросить позицию контейнера А.

В настоящее время он настроен следующим образом:

CSS: 

.containerA { position: fixed; top: 0; width:200px; height: 100vh; }
.containerB { position: fixed; top: 100vh; width: 200px; height: 100vh; }

Jquery: 

$("#containerBtrigger").click(function(){
// set z-index first so you wont see container A resetting position.
  $(".containerB").css("z-index", "20");
  $(".containerA").css("z-index", "0");

//have container B slide upwards into the screen
$(".containerB").animate({
  top : "0",}, 500);

//container A slides upwards, out of the screen, when its animation is done, it should set the position to 100vh, out of the viewport.
$('.containerA').animate({
  top: '-100vh'
  }, 500, function () {
     $(this).css({ top : '100vh' }); });
});

Однако всякий раз, когда я нажимаю на кнопку запуска, контейнер, который должен выскользнуть из экрана, скользит вниз, а другой - вверх, как и предполагалось.

Я также пытался заменить функцию обратного вызова animate на: 

function () { $(this).removeAttr('style');

Но это тоже ничего не меняет.

Я все еще очень плох с jQuery и не трогал месяцами.Вероятно, есть способ получше настроить игровые автоматы, но на данный момент я абсолютно не в себе.

1 Ответ

0 голосов
/ 18 октября 2018

JQuery выглядит нормально для меня, но невозможно сказать, так как я не вижу, как вы структурировали свой HTML, что важно.Всегда делайте все возможное, чтобы предоставить ВСЕ соответствующий код в ваших предложениях.

На самом деле вам не нужно беспокоиться о z-index, если элементы являются родственными.Прокрутите их оба вверх в одинаковом темпе, затем в конце проверьте, находится ли поле над рамкой (или окном), и если это так, просто сбросьте его css, чтобы он был ниже..css() функция jQuery является мгновенной, поэтому ваши пользователи не увидят, что она возвращается к сути.

JS FIDDLE 

<style>
    .frame { 
        height: 200px; 
        width: 200px;
        border: 5px solid gray; 
        margin: 20px; 
        position: relative; 
        background-color: pink; 
        float: left; 
        overflow: hidden; /* uncomment to see full action */
    }
    .frame > div {
        position: absolute;
        display: block;
        left: 0; 
        height: 200px; 
        width: 200px; 
    }
    .box_a {
        top: 0; 
        background-color: red; 
    }
    .box_b {
        top: 200px; 
        background-color: blue; 
    }
    #scroll { 
        float: left;
        margin: 20px 0 0 50px; 
    }
</style>

<div class="frame">
    <div class="box_a"></div>
    <div class="box_b"></div>
</div>
<button id="scroll" type="button">Scroll</button>

<script>
// when called, collect all boxes
// use current "top" value to calculate new "top" value
// animate it, then check new "top" to see if it's above the frame
// if so, instantly reset it to the bottom. 
const scroll_all_boxes = function() {
    $('.box_a, .box_b').each(function(index, box) {
        const old_top = parseInt($(box).css('top')); // example: '200px' => 200
        const new_top = old_top - 200 + 'px';  // example: "-200px"

        $(box).animate({
            top: new_top
        }, 500, function() {
            // after animation, if box is at above frame
            // reset css so it's at bottom, instantly 
            const postAnimationTop = parseInt($(box).css('top')); // '200px' => 200
            if (postAnimationTop !== 0) {
                $(box).css({
                    top: '200px'
                });
            }
        });
    });
}

$('#scroll').click(scroll_all_boxes);
</script>

Сценарий выше не является решением для копирования / вставки, но это отличный простой пример.Задайте мне вопросы, если вам нужно, но сделайте все возможное, чтобы изучить его и применить к вашей собственной ситуации.Это лучший способ учиться.Удачи!

...