У меня было желание написать несколько jquery, которые я планирую использовать в многоэтапной форме. Он работает, но переходы являются глючными.Переход плавно между элементами
Если я просто перехожу назад и вперед между 1 & 2, тогда это кажется нормально, но если я пойду 1-3, то перейдите в обратном порядке, это не сработает, как ожидалось. Иногда клик не регистрируется, и все это, похоже, выходит из графика.
Что такое лучший подход, чтобы этот взгляд был последовательным?
$(function() {
$('.next-form').click(function() {
current_fs = $(this).parent();
next_fs = $(this).parent().next();
$(current_fs).animate({
opacity: 0
}, "fast", function() {
$(this).hide();
});
$(next_fs).css({
position: 'absolute',
left: '100%',
top: 0
});
$(next_fs).show(function() {
$(this).animate({
left: 0
})
});
});
$('.previous-form').click(function() {
current_fs = $(this).parent();
previous_fs = $(this).parent().prev();
$(current_fs).animate({
left: '100%'
}, function() {
$(this).hide();
});
$(previous_fs).show(function() {
$(this).animate({
opacity: 100
}, 2000);
})
});
});
.outer{
position: relative;
width: 500px;
height: 50px;
overflow: hidden;
}
.one{
width: 500px;
background-color: #000;
height: 50px;
}
.two{
width: 500px;
background-color: blue;
height: 50px;
display: none;
}
.three{
width: 500px;
background-color: red;
height: 50px;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div class="outer">
<div class="one">
<button type="button" class="next-form" >Next</button>
</div>
<div class="two">
<button type="button" class="previous-form" >Previous</button>
<button type="button" class="next-form" >Next</button></div>
<div class="three"><button type="button" class="previous-form">Previous</button></div>
</div>
Посмотрите в CSS переходы, а не делать это в JQuery кода. Он будет намного более плавным, и для этого нужны переходы CSS. –
Я думаю, что есть проблема где-то с моей логикой. Я видел, как jquery-анимация работает нормально, я уверен, что я сделал что-то не так с моим кодом. – Guerrilla