Transition time does not work

Asked

Viewed 115 times

1

I gave 3 seconds to make a more sensitive transition but it doesn’t work, it’s too gross:

$(function(){
    var status = 0;

    /* INICIA MENU-GRID */
    $('.menu-grid').on('click',function(){
        console.log(status);

        if(status == 0) {
            $('aside').removeClass('inativo').addClass('ativo'),3000;
            status = 1;
        }else {
            $('aside').removeClass('ativo').addClass('inativo'),3000;
            status = 0;
        }
    });
});
javascript jquery

  • It’s easier to transition from CSS to defining these classes. No 3000 in the code (which does not do what you think).

  • i tried to give a Transition in css but it didn’t work

2 answers

6

This is easier to solve by CSS when defining your classes. For example:

$('div').addClass('off');
setTimeout( () => $('div').removeClass('off').addClass('on'), 3000);
div { 
  height: 100px;
  transition: background-color 1s;
 }
.on { 
  background-color: green; 
 }
.off { 
  background-color: red; 
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

Note: this syntax with () => still have some compatibility problems. The safest would be this:

setTimeout( function() { $('div').removeClass('off').addClass('on') }, 3000);

2

If you want to use animations via jQuery, you have to use Animate

 $( 'aside' ).animate({
     opacity: 0.25,
     left: "+=50",
   }, 3000, function() {
     // Animation complete.
   });

You can also use something simpler like . toggle() or . toggleFade()

Animations should be done whenever possible via css, because these via JS end up drastically affecting the performance of the thing.

jQuery should only be used to add or remove classes giving you the power to choose which effect and modification should be applied to the element.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.