javascript - 如何让slideUp和slideDown jQuery动画更流畅

Question

我正在尝试制作一个上下滑动的动画，但它看起来并不像我想要的那么平滑。这是 fiddle :

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/ 中看到它。 .