Achieving a smooth sliding motion with the help of jQuery animation

Question

Achieving a smooth sliding motion with the help of jQuery animation

Here is the code snippet:

In HTML:

<div>
    <div id="div1">12345</div>
    <div id="div2">67890</div>
    <div id="div3"><a href="#" id="slide">abcde</a></div>
    <div id="pad" style="display:none;">1234567890</div> 
</div>

CSS:

#div1{width: 150px; height:50px; background-color: red;}
#div2{width: 150px; height:100px; background-color: yellow;}
#div3, #pad{width: 150px; height:20px; background-color: grey;}
#pad{height: 50px;}

JavaScript:

        $("#slide").click(function(e) {
         e.preventDefault();
          if($("#div2").hasClass("toggled")) {
             $("#div2").animate({"height": "100px"}, function() {
                 $("#pad").hide();}).removeClass("toggled"); 
          } 
          else {
            $("#div2").animate({"height": "40px"}, function() {
            $("#pad").show();}).addClass("toggled"); 
          }
       });

View JSFIDDLE demo

Upon clicking the link, a grey div will slide up, resembling a keypad sliding upwards.

However, the behavior seems odd. The "pad" div only appears after the grey div has slid up and hides when it slides down. What I'm aiming for is for the "pad" to slide up and slide down smoothly, similar to opening and closing a drawer. Any suggestions?

javascript jquery html css

Answer 1

Answer №1

Utilize slideDown/Up to display the pad element without waiting for the slide animation to complete before starting the animation of pad

$("#slide").click(function(e) {
  e.preventDefault();
  if ($("#div2").hasClass("toggled")) {
    $("#div2").animate({
      "height": "100px"
    }).removeClass("toggled");
    $("#pad").slideUp();
  } else {
    $("#div2").animate({
      "height": "40px"
    }).addClass("toggled");
    $("#pad").slideDown();
  }
});

#div1 {
  width: 150px;
  height: 50px;
  background-color: red;
}
#div2 {
  width: 150px;
  height: 100px;
  background-color: yellow;
}
#div3,
#pad {
  width: 150px;
  height: 20px;
  background-color: grey;
}
#pad {
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <div id="div1">12345</div>
  <div id="div2">67890</div>
  <div id="div3"><a href="#" id="slide">abcde</a></div>
  <div id="pad" style="display:none;">1234567890</div> 
</div>

Answer 2

Utilize slideDown/Up to display the pad element without waiting for the slide animation to complete before starting the animation of pad

$("#slide").click(function(e) {
  e.preventDefault();
  if ($("#div2").hasClass("toggled")) {
    $("#div2").animate({
      "height": "100px"
    }).removeClass("toggled");
    $("#pad").slideUp();
  } else {
    $("#div2").animate({
      "height": "40px"
    }).addClass("toggled");
    $("#pad").slideDown();
  }
});

#div1 {
  width: 150px;
  height: 50px;
  background-color: red;
}
#div2 {
  width: 150px;
  height: 100px;
  background-color: yellow;
}
#div3,
#pad {
  width: 150px;
  height: 20px;
  background-color: grey;
}
#pad {
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <div id="div1">12345</div>
  <div id="div2">67890</div>
  <div id="div3"><a href="#" id="slide">abcde</a></div>
  <div id="pad" style="display:none;">1234567890</div> 
</div>

Achieving a smooth sliding motion with the help of jQuery animation

Answer №1

Similar questions

Is there a way to reset or clear the queue using Jquery?

AngularJS framework may encounter an issue where changes in $scope data do not reflect in the view

Incorporating a background image into a card component using props

Develop a dynamic context menu with jQuery that can be loaded dynamically using Ajax requests

Utilize jQuery to convert text to lowercase before adding Capitalize CSS styling

Error message "Jquery smooth scrolling issue: Unable to retrieve property 'top' as it is not defined"

Flex container scrollable element not functioning consistently between different browsers

Misplace reference to object during method execution

Cryptocurrency price tracker with sleek Bitcoin symbol and FontAwesome icons

What is the best way to handle a large number of nested AJAX GET requests?

What steps can be taken to enhance the functionality of this?

Invoking a function beyond the boundaries of an Angular application

Utilize WebdriverIO to loop through elements and trigger a click event on a link

Personalizing a dropdown menu using ajax

Encountering a problem when trying to set the value in the controller and receiving unexpected output from the console

Help needed with debugging CSS for IE6 >_<

Is it necessary to convert SCSS into CSS in React?

Guide to showing an HTML string retrieved from MongoDB with the help of Express

Is there a way to modify the CSS display property upon clicking a link or button?

I am looking to transform CSV data into XLSX file format, upload it to AWS, and obtain the corresponding URL