An easy way to switch animations using CSS display:none

Question

An easy way to switch animations using CSS display:none

Dealing with some missing gaps here, hoping to connect the dots and figure this out.

I'm attempting to create a functionality where a div slides in and out of view each time a button is clicked. Eventually, I want multiple divs to slide out simultaneously. Currently using:

//css
display {visibility:hidden}

Then checking for:

//js$
("#initiate").click( function(event) {
$("#initiate").click( function(event) {
  if ($("#nav").is(":hidden")) {
    $("#nav").stop().animate({
      right: '520px'
    }, 1300);
            }
    else {
      $("#nav").stop().animate({
        right: '320px'
      }, 1300);
    }

  });

Facing a few issues: 1. Slide only works when visibility is set to something other than "none." 2. Only slides out, doesn't slide back in.

Any suggestions on how I can get this working?

http://jsfiddle.net/c48vdqf6/2/

javascript jquery css

Answer 1

Answer №1

Animating the display property can be tricky since CSS does not allow it. One common challenge for developers is trying to animate this property.

To work around this limitation, you can animate the right property instead. By positioning the element off-screen and animating it to slide into view when needed, as shown in your Fiddle example.

EDIT

Regarding the issue where the element only slides out but not back in, you can use a class to control its position dynamically:

$("#initiate").click(function(event) {
    if ($("#nav").hasClass("hidden")) {
        $("#nav").stop().animate({
            right: '-320px'
        }, 1300);

    } else {
        $("#nav").stop().animate({
            right: '520px'
        }, 1300);
    }
    $("#nav").toggleClass("hidden")
});

Check out the updated Fiddle for reference.

I hope this explanation helps!

Answer 2

Animating the display property can be tricky since CSS does not allow it. One common challenge for developers is trying to animate this property.

To work around this limitation, you can animate the right property instead. By positioning the element off-screen and animating it to slide into view when needed, as shown in your Fiddle example.

EDIT

Regarding the issue where the element only slides out but not back in, you can use a class to control its position dynamically:

$("#initiate").click(function(event) {
    if ($("#nav").hasClass("hidden")) {
        $("#nav").stop().animate({
            right: '-320px'
        }, 1300);

    } else {
        $("#nav").stop().animate({
            right: '520px'
        }, 1300);
    }
    $("#nav").toggleClass("hidden")
});

Check out the updated Fiddle for reference.

I hope this explanation helps!

Answer 3

Answer №2

My preferred method involves using CSS3 for animation with transitions, and then utilizing JavaScript/jQuery to toggle classes:

https://example.com/jsbin-animation

<!DOCTYPE html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
<style>
#display{
  width:300px;
  height:100vh;
  position:fixed;
  top:0;
  right:0;
  background-color:black;
  transition:right 0.5s ease;
}
#display.hide{
  right:-300px;
}
</style>
</head>
<body>
<p id="initiate">test</p>
<div id="display" class="hide"></div>
<script>
$("#initiate").on("click",function(){
 $("#display").toggleClass("hide");
});
</script>
</body>
</html>

This approach reduces code complexity and simplifies maintenance in the long term, especially when dealing with multiple sliding div elements.

Answer 4

My preferred method involves using CSS3 for animation with transitions, and then utilizing JavaScript/jQuery to toggle classes:

https://example.com/jsbin-animation

<!DOCTYPE html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
<style>
#display{
  width:300px;
  height:100vh;
  position:fixed;
  top:0;
  right:0;
  background-color:black;
  transition:right 0.5s ease;
}
#display.hide{
  right:-300px;
}
</style>
</head>
<body>
<p id="initiate">test</p>
<div id="display" class="hide"></div>
<script>
$("#initiate").on("click",function(){
 $("#display").toggleClass("hide");
});
</script>
</body>
</html>

This approach reduces code complexity and simplifies maintenance in the long term, especially when dealing with multiple sliding div elements.

Answer 5

Answer №3

Instead of constantly checking if the element is visible, it's more efficient to use a class or flag to determine its position.

$("#start").click(function(event) {
    if ($("#menu").hasClass("inactive")) {
        $("#menu").stop().animate({
            left: '-300px'
        }, 1000);
    } else {
        $("#menu").stop().animate({
            left: '500px'
        }, 1000);
    }
    $("#menu").toggleClass("inactive");
});

FIDDLE

Answer 6

Instead of constantly checking if the element is visible, it's more efficient to use a class or flag to determine its position.

$("#start").click(function(event) {
    if ($("#menu").hasClass("inactive")) {
        $("#menu").stop().animate({
            left: '-300px'
        }, 1000);
    } else {
        $("#menu").stop().animate({
            left: '500px'
        }, 1000);
    }
    $("#menu").toggleClass("inactive");
});

FIDDLE

Answer 7

Answer №4

I decided to switch up the font color and make some modifications to the if statement for a more advanced approach. $("#activate").click( function(event) {

http://jsfiddle.net/c48vdqf6/3/

if ($("#menu").css('left') == "280px") {
  $("#menu").stop().animate({
    left: '-280px'
  }, 1200);
}
else {
  $("#menu").stop().animate({
    left: '280px'
  }, 1200);
}
});

Answer 8

I decided to switch up the font color and make some modifications to the if statement for a more advanced approach. $("#activate").click( function(event) {

http://jsfiddle.net/c48vdqf6/3/

if ($("#menu").css('left') == "280px") {
  $("#menu").stop().animate({
    left: '-280px'
  }, 1200);
}
else {
  $("#menu").stop().animate({
    left: '280px'
  }, 1200);
}
});

Answer 9

Answer №5

If I were to tackle this task, I would utilize CSS over Javascript and then employ Javascript to dynamically add and remove a class called 'show' or something similar. A similar approach was used by me recently for an off-canvas menu.

For your reference, I have provided an example here...

https://jsfiddle.net/wyd1rxhg/

.menu {
  transition: left 0.5s ease;
  position: absolute;
  width: 400px;
  left: -400px;
  background-color: red;
}

.show {
  left: 0;
}

To make it slide back in, simply remove the show class and watch it disappear!

Answer 10

If I were to tackle this task, I would utilize CSS over Javascript and then employ Javascript to dynamically add and remove a class called 'show' or something similar. A similar approach was used by me recently for an off-canvas menu.

For your reference, I have provided an example here...

https://jsfiddle.net/wyd1rxhg/

.menu {
  transition: left 0.5s ease;
  position: absolute;
  width: 400px;
  left: -400px;
  background-color: red;
}

.show {
  left: 0;
}

To make it slide back in, simply remove the show class and watch it disappear!

An easy way to switch animations using CSS display:none

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Does the default input default to text format?

aligning columns within a flexible element that has a maximum height

Validation for dates in Angular.Js input is important to ensure that only

What is the most effective way to showcase a list of image URLs in HTML with Vue?

Tips for uploading a file with fetch

How can I ensure that the state is only updated after the map function has finished executing in React?

How does the PhoneGap API handle Timestamp format?

Regular expressions or regex can be used to match the initial letter or letters of various words

Please ensure all three of the last checkboxes are ticked before finalizing submission

Top recommendations for implementing private/authentication routes in NextJS 13

JavaScript CheckBox Color Change Not Functioning

Incorporating nested maps in JSX for efficient data manipulation

The dimensions of the window - creating divs within td elements - the appearance of scroll

Navigation through dots on a single page

Discovering the most concise string within the array

Sending jQuery events from an aspx page to an ascx control

I'm having trouble with using setInterval() or the increment operator (i+=) while drawing on a canvas in Javascript. Can anyone help me out? I'm new

Refresh the table following the removal of an item

Vue js lacks the ability to effectively link HTML elements to corresponding JavaScript functions

Tips for checking the validity of PHP variable names, such as $as['abc'], within an HTML textbox