Jquery CSS Visibility with Animation

jQuery css Visibility with animation

$('.drop1').css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0}, 200);

How to animate visibility: hidden?

Try this way:

$(".button").hover(function(){
  $('.class').css("opacity", "1.0").animate({opacity: 0}, 1200, function(){
    $('.class').css("visibility", "hidden");
});
},function(){
  $('.class').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1}, 1200);
});

However, this is not the best option to fadeIn and fadeOut. You can use instead the methods with those names that jQuery provide, or better, use CSS transitions in case you can.

Animation with animate.css with visibility:hidden

You could also accomplish this using just jQuery like so:

 $('#navbar').hide();
 $("#btnNav").click(
    function(){

       $("#navbar").fadeToggle( "slow", "linear" );

    });

    $("#btnAlert").click(
    function(){
        alert("navbar btn clicked!");

    }
    );

I also removed "hidNav" and "showNav" from the CSS and added absolute position to "btnNav"

How to set visibility:hidden then visibility:visible in a CSS animation?

Try transitioning the opacity from 0 to 1.

See: CSS transition with visibility not working for more details

Animate CSS display

Just use .show() passing it a parameter:

$(".maincontent").show(2500);

Edit (based on comments):

The above code fades in the element over a 2.5 second span. If instead you want a 2.5 second delay and then want the element to display, use the following:

$(".maincontent").delay(2500).fadeIn();

If, of course, you want a delay and a longer fade, just pass the number of milliseconds desired into each method.

Fading visibility of element using jQuery

You could set the opacity to 0.0 (i.e. "invisible") and visibility to visible (to make the opacity relevant), then animate the opacity from 0.0 to 1.0 (to fade it in):

$('ul.load_details').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0});

Because you set the opacity to 0.0, it's invisible despite being set to "visible". The opacity animation should give you the fade-in you're looking for.

Or, of course, you could use the .show() or .fadeTo() animations.

EDIT: Volomike is correct. CSS of course specifies that opacity takes a value between 0.0 and 1.0, not between 0 and 100. Fixed.

visibility hidden with animation

It will be difficult to do it with visibility, but you could get the exact same effect if you instead use opacity:

.bubblingG.hidden {
    opacity:0;

}
.bubblingG {
    opacity:1;
    transition:opacity 2s linear;
}

$(updateSection+' .bubblingG').addClass('hidden');

Replace jQuery visibility and opacity animation with pure Javascript

The simplest (and by far the most performant) option here is to use CSS for animations. JS animation should be avoided as much as possible as it's slow and not hardware accelerated.

To do what you require in CSS the key rule to apply is transition. You can use this to control the properties to be animated, their delay, execution time etc. More information is available at MDN.

Here's a rudimentary example. Note that JS is only used to add the class to trigger the animation - it does not control the animation at all.

let square = document.querySelector('#square');

document.querySelector('button').addEventListener('click', () => {
  square.classList.toggle('show');
});

#square {
  width: 200px;
  height: 200px;
  background-color: #C00;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  pointer-events: none;
}
#square.show {
  opacity: 1.0;
  visibility: visible;
}

<button>Toggle the square...</button>
<div id="square"></div>

Visibility animation but a delay on the reverse effect in SCSS

You could have a different transition for .is_visible

$(window).on("load", function() {  $("button").click(function() {    $(".nav-slider").toggleClass("is_visible");  });});

.nav-slider {  position: fixed;  top: -100%;  left: 0;  width: 100%;  height: calc(100% - 60px);  background-color: $white;  z-index: 1;  visibility: hidden;  padding-top: 40px;  transition: top 2s, visibility 2s;}
.nav-slider.is_visible {  transition: top 2s, visibility 0s;  top: 60px;  visibility: visible;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="nav-slider">  test</div>
<button>slider</button>

---

Related Topics