如何使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/上看到它。