Transition time does not work

Question

Transition time does not work

Navigation

#1 by (6 votes)
#2 by (2 votes)

1

I gave 3 seconds to make a more sensible transition but it does not work, it's very rough:

$(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

asked by anonymous 20.12.2016 / 03:28

2 answers

Regular expression Error converting data php

score 6 · Answer 1

It is easier to solve this by CSS, in the definition of 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 has some compatibility issues. The safest would be this:

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

score 2 · Answer 2

If you want to use animations via jQuery, you will 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, as 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.