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

如何使slideUp和slideDown jQuery动画更流畅

1 个答案: