Как я могу остановить этот jQuery от прослушивания?

Question

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

Когда вы навешиваете верхнюю часть коробки (технический слой) технически), то передняя панель должна скользить вверх, открывая задний слой. Я попытался сделать это, используя .slideUp() и .slideDown(), но он продолжал прослушивать оба слоя одновременно. Итак, я переключился на .slideUp() и .fadeIn(), но это, похоже, не помогло.

Как вы можете видеть, это иногда показывает как дивы, когда это не предполагается, и это также слайды несколько раз в случайном порядке. Как я могу сделать это более эффективным?

Вот JsFiddle

UPDATE:

Вопросы, ищущих отладки помощи ("почему не этот код работает?") должен включать в себя желаемое поведение, конкретную проблему или ошибку и кратчайший код , необходимый для воспроизведения в самом вопросе. Вопросы без четкой постановки задачи не полезны другим читателям .

Именно по этой причине люди голосуют, чтобы закрыть этот ответ ... Что из этого списка не имеет этого вопроса?

Desired behavior? - Check 
Specific problem? - Check 
Shortest code necessary? - Check 
Clear problem? - check 

Answer 1

Вам не нужно использовать slideUp и slideDown, вы можете достичь эффекта скольжения с помощью преобразования и перехода CSS3 свойства.

Обновлено JS скрипку: https://jsfiddle.net/9uw2q24h/3/

Javascript:

$('.outer').hover(function() { 
    $(this).children('.front').addClass('front-up'); 
}, function() { 
    $(this).children('.front').removeClass('front-up'); 
}); 

CSS:

.outer { 
    position: relative; 

    .front, 
    .back { 
    text-align: center; 
    width: 100%; 
    } 
    .back { 
    display: block; 
    } 
    .front { 
    position: absolute; 
    transition: 0.5s ease; 
    } 
    .front-up { 
    transform: translateY(-100%); 
    } 
} 

Если вы должны поддерживать старые браузеры, не забудьте добавить префиксы поставщика к переходу и правила tranform (-webkit-, -moz- и т. д.).

Answer 2

Вы можете сделать это так:

var running = false; 
$('.outer').hover(function() { 
    if (!running) { 
    running = true; 
    $(this).children('.front').slideUp(function() { 
     $(this).next('.back').slideDown(function() { 
     running = false; 
     }); 
    }); 
    } 
}, function() { 
    if (!running) { 
    running = true; 
    $(this).children('.back').slideUp(function() { 
     $(this).prev('.front').slideDown(function() { 
      running = false; 
     }); 
    }); 
    } 
}); 

Объяснение: как только анимация начинает сохранять статус в переменной для того, чтобы избежать конфликтов (в противном случае она будет называться снова) , Кроме того, в сочетании с slideDown и slideUp вы получаете гораздо более плавную анимацию. У вас был не очень приятный мерцающий с вашей комбинацией fadeOut и slideDown

Fiddle: https://jsfiddle.net/dL7ckq6b/

Answer 3

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

Javascript:

$('.outer').hover(function() { 
$('.front').slideUp(); 
    console.log("IN"); 
}, function() { 
    $('.front').slideDown(); 
    console.log("OUT"); 
}); 

Я также обновить CSS, чтобы более четко показать эффект происходит.

CSS:

.outer { 
    .front, 
    .back { 
    text-align: center; 
    position: absolute; 
    padding: 20px 10px; 
    border: 2px solid yellow; 
    } 

    .front { 
    z-index: 10; 
    background-color: red; 
    } 

    .back { 
    z-index: 0; 
    background-color: blue; 
    } 
} 

здесь является JSFiddle: https://jsfiddle.net/z8e7eb4b/