How to make a div in Javascript smoothly slide out when it appears

Question

How to make a div in Javascript smoothly slide out when it appears

Looking to add some smooth sliding animation to this basic JS code instead of the glitchy appearance it currently has.

I've experimented with different options but haven't had any success, any suggestions? Here's the code snippet along with the Jsfiddle link:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<style>
body{margin:0;}
#foo{min-width:400px; height:100%; background-color:#9C0; display:none; position:absolute; right:0px; top:0px;}

</style>
<body>
<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a>
<div id="foo" >

</div>

<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>
</body>
</html>

JsFiddle

javascript html css

Answer 1

Answer №1

I have updated your fiddle using VanillaJS. You can view it here and see that it works perfectly.

document.getElementById('bar').onclick = (function()
{
    var that, interval, step = 20;
    var id = document.getElementById('foo');
    var handler = function()
    {
        that = that || this;
        that.onclick = null;
        id = document.getElementById('foo');
        interval = setInterval (function()
        {
            id.style.right = (parseInt(id.style.right, 10) + step) + 'px';
            if (id.style.right === '0px' || id.style.right === '-400px')
            {
                that.onclick = handler;
                clearInterval(interval);
                if (id.style.right === '-400px')
                {
                    id.style.display = 'none';
                }
                step *= -1;
            }
            else
            {
                id.style.display = 'block';
            }
        }, 100);
    };
    return handler;
}());

Explanation of the code:

The click handler is attached in JS to allow dynamic unbinding/binding
Instead of directly assigning a handler, a closure is used for the interval and DOM references
handler is the event handler that assigns its context (the clicked element) to that, allowing reference in the interval callback and unbinding the handler
The interval moves the element by step pixels (adjust to desired value)
If the div is at position 0 or -400, the interval is canceled, click handler is rebound, step *= -1 inverts the animation
Adjust the display property accordingly

The interval occurs every 100ms, but adjusting set to 10 and interval to 50 can smoothen the animation

Answer 2

I have updated your fiddle using VanillaJS. You can view it here and see that it works perfectly.

document.getElementById('bar').onclick = (function()
{
    var that, interval, step = 20;
    var id = document.getElementById('foo');
    var handler = function()
    {
        that = that || this;
        that.onclick = null;
        id = document.getElementById('foo');
        interval = setInterval (function()
        {
            id.style.right = (parseInt(id.style.right, 10) + step) + 'px';
            if (id.style.right === '0px' || id.style.right === '-400px')
            {
                that.onclick = handler;
                clearInterval(interval);
                if (id.style.right === '-400px')
                {
                    id.style.display = 'none';
                }
                step *= -1;
            }
            else
            {
                id.style.display = 'block';
            }
        }, 100);
    };
    return handler;
}());

Explanation of the code:

The click handler is attached in JS to allow dynamic unbinding/binding
Instead of directly assigning a handler, a closure is used for the interval and DOM references
handler is the event handler that assigns its context (the clicked element) to that, allowing reference in the interval callback and unbinding the handler
The interval moves the element by step pixels (adjust to desired value)
If the div is at position 0 or -400, the interval is canceled, click handler is rebound, step *= -1 inverts the animation
Adjust the display property accordingly

The interval occurs every 100ms, but adjusting set to 10 and interval to 50 can smoothen the animation

Answer 3

Answer №2

If my interpretation is correct, you would want to utilize jQuery for implementing sliding effects.

Check out the example on JsFiddle.

JavaScript:

$("a").on('click', function() {
    $("#foo").slideToggle();
});

Answer 4

If my interpretation is correct, you would want to utilize jQuery for implementing sliding effects.

Check out the example on JsFiddle.

JavaScript:

$("a").on('click', function() {
    $("#foo").slideToggle();
});

Answer 5

Answer №3

Here is the updated fiddle with jQuery implementation: http://jsfiddle.net/wRWHw/2/

   function toggle_visibility(id) {
        $("#" + id).slideToggle("slow");
    }

Answer 6

Here is the updated fiddle with jQuery implementation: http://jsfiddle.net/wRWHw/2/

   function toggle_visibility(id) {
        $("#" + id).slideToggle("slow");
    }

How to make a div in Javascript smoothly slide out when it appears

Answer №1

Answer №2

Answer №3

Similar questions

Sending a JWT token to a middleware with a GET request in Express Node.js - the proper way

How can I align the text in a dropdown menu to the center on Safari?

Converting Cyrillic characters to ASCII codes using JavaScript: A step-by-step guide

A guide on styling JSON key values within HTML

Having trouble retrieving data using a custom URL in Axios with ReactJs

Creating unique validation rules using VeeValidate 3 and vue.js

Why does the 401 error continue to persist while attempting to log in using Google Identity service on my Laravel application?

Develop a TypeScript class by incorporating a static function from an external library, while ensuring type safety

React input field keeps losing focus during re-render operations

Please enter the text in the field provided at the bottom using IE10

Is there a way to execute a PHP script using Ajax without needing any return values?

Instead of using a computed getter/setter, make use of mapState and mapMutations to simplify

Is it possible for Susy to output a pixel-based span?

What is the correct way to submit a formarray in an angular application following the specified format?

Tips on Including a Custom Header in an Ajax Request for a Cross-Domain JsonP Call

I experienced an issue with Firestore where updating just one data field in a document caused all the other data to be wiped out and replaced with empty Strings

Utilize JavaScript to Forward Subdomain to Main Domain

Transfer a specific row from a dataTable to another dataTable on a separate php page

Detect keypress within a BrowserWindow even when multiple BrowserView components are present

Struggling to reveal concealed items on a webpage using jQuery and attempting to cycle through an array without success