CODEWITHSUNDEEP
javascriptjquery
Diego Rios
Diego Rios

Reputation: 503

How to make slideUp and slideDown jQuery animation smoother

I'm trying to make a slideUp and down animation but it doesn't really look as smooth as i'd like. Here's the fiddle:

https://jsfiddle.net/zr04h0fj/

This is the jQuery file:

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

});

Please help me make it smoother. I've read some questions but they are not the same as mine.

Thank you!

Upvotes: 0

Views: 375

Answers (1)

Alexander Nied
Alexander Nied

Reputation: 13678

The way you had multiple inline elements, using <br> to separate and the margin on the button all seem to have come together to create a bit of a "jump" at the start of the slide. Without rewriting your layout I simply put a wrapper element around them to help smooth it out a bit-- you can see it at https://jsfiddle.net/cuhf6f87/.

Upvotes: 1

Related Questions