slideUpとslideDown jQueryアニメーションをスムーズにする方法

Question

私はslideUpとdownアニメーションを作成しようとしていますが、実際には滑らかに見えません。ここではフィドルだ：

https://jsfiddle.net/zr04h0fj/

これは、jQueryのファイルです：

$(document).ready(function(){ 
$('.resetBtn').hide(); 
var timeBtn = false; 
var breakBtn = false; 
var timeMin = parseInt($('#timeMin').text()); 
var breakMin = parseInt($('#timeMin').text()); 


// Reset Buttons 
$('#timeReset').click(function(){ 
    timeBtn = false; 
    timeMin = 5; 
    $('#timeMin').html('5'); 
    $('#timeReset').slideUp(); 

}); 

$('#breakReset').click(function(){ 
    breakBtn = false; 
    breakMin = 5; 
    $('#breakMin').html('5'); 
    $('#breakReset').slideUp(); 
}); 


// Plus and minus TIME buttons 
$('#plusTimeMin').click(function(){ 
    if (timeMin >= 1){ 
    timeMin += 1; 
    $('#timeMin').html(timeMin); 
    if(!timeBtn){ 
     timeBtn = true; 
     $('#timeReset').slideDown(); 
    } 
    } 
}); 

$('#minusTimeMin').click(function(){ 
if (timeMin > 1){ 
    timeMin -= 1; 
    $('#timeMin').html(timeMin); 
    if(!timeBtn){ 
    timeBtn = true; 
    $('#timeReset').slideDown(); 
    } 
    } 
}); 


// Plus and minus BREAK buttons 
$('#plusBreakMin').click(function(){ 
    if (breakMin >= 1){ 
    breakMin += 1; 
    $('#breakMin').html(breakMin); 
    if(!breakBtn){ 
     breakBtn = true; 
     $('#breakReset').slideDown(); 
    } 
    } 
}); 

$('#minusBreakMin').click(function(){ 
    if (breakMin > 1){ 
    breakMin -= 1; 
    $('#breakMin').html(breakMin); 
    if(!breakBtn){ 
     breakBtn = true; 
     $('#breakReset').slideDown(); 
    } 
    } 
}); 

}); 

私はそれがスムーズに助けてください。私はいくつかの質問を読んだが、私と同じではない。

ありがとうございました！

Answer 1

あなたはすべてのボタンにとマージンを分離するために<br>を使用して、複数のインライン要素を持っていた方法は、スライドの開始時に「ジャンプ」のビットを作成するために一緒に来ているように見えます。あなたのレイアウトを書き直すことなく、私は単純にそれらの周りにラッパー要素を置くことで少し滑らかになります。それはhttps://jsfiddle.net/cuhf6f87/で見ることができます。