0
私は多段階フォームで使用する予定の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>
を追加することによって、それを修正し、むしろjQueryのコードでそれを行うよりもCSSの遷移を調べてください。これははるかにスムーズになり、CSSの移行のためのものです。 –
私のロジックのどこかに問題があると思います。私はうまく動作するjqueryのアニメーションを見て、私は私のコードで何かが間違っていると確信しています。 – Guerrilla