Javascript 如何使slideUp和slideDown jQuery动画更平滑

我正在尝试制作一个滑动和向下的动画，但它看起来并不像我想要的那样平滑。这是小提琴：

这是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();
    }
  }
});

});

请帮我把它弄光滑些。我读过一些问题，但它们和我的不一样

---

谢谢大家!

使用

分隔多个内联元素的方式，以及按钮上的边距，似乎都在幻灯片开始时产生了一点“跳跃”。在不重写布局的情况下，我只需在布局周围放置一个包装器元素，以帮助平滑布局—您可以在。

完美解决方案中看到它。非常感谢。