Animieren der Klasse Toggle/Element Swap

Question

Ich habe eine Funktion geschrieben, die eine "Menü" -Schaltfläche mit einer "Schließen" -Schaltfläche tauscht, wenn geklickt wird (ein Div ausblenden und ein anderes anzeigen) und umgekehrt. Ich bemühe mich, dem Wechsel jedes Swaps eine Animation hinzuzufügen.

Das ist, was ich habe:

$(document).ready(function() { 
    $('#menu-button').on('click', function() { 
    $('#menu-button').toggleClass('inactive', 1000); 
    $('#close-button').toggleClass('inactive', 1000).toggleClass('active', 1000); 
    }); 

    $('.close-trigger').on('click', function() { 
    $('#close-button').toggleClass('active').toggleClass('inactive', 1000); 
    $('#menu-button').toggleClass('inactive', 1000).toggleClass('active', 1000); 
    }); 
}); 

ich auch fadeIn/fadeOut/fadeToggle versucht haben, statt toggleClass ohne Erfolg. Das Problem mit fadeToggle ist, dass beide Elemente gleichzeitig zur gleichen Zeit erscheinen, und es gibt immer noch keine Fade-Animation. Gibt es eine bessere Möglichkeit, dies zu programmieren?

Answer 1

toggleClass() erlaubt keine Animation. Das zweite Argument ist nicht die Zeit. Lesen Sie die Dokumentation:

http://api.jquery.com/toggleclass/

ich die beste Schätzung für Sie würde CSS Übergang sein:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

Wenn Sie Übergang nicht verwenden wollen, dass das, was zu tun wäre:

$('#menu-button').on('click', function() { 
    $('#menu-button').hide(); 
    $('#close-button').fadeIn(); 
    }); 

    $('.close-trigger').on('click', function() { 
    $('#close-button').hide(); 
    $('#menu-button').fadeIn(); 
    }); 

Answer 2

bitte versuchen Sie dieses

$(document).ready(function() { 
 
    $('#button1').on('click', function() { 
 
    $('#button1').hide(); 
 
    $('#button2').show().addClass('toggle'); 
 
    }); 
 
    $('#button2').on('click', function() { 
 
    $('#button2').hide(); 
 
    $('#button1').show().addClass('toggle'); 
 
    
 
    }); 
 

 
    
 
    
 
});

#button2 
 
{ 
 
    display:none; 
 
} 
 
.button.toggle 
 
{ 
 
    opacity: 1; 
 
\t animation-name: fadeInOpacity; 
 
\t animation-iteration-count: 1; 
 
\t animation-timing-function: ease-in; 
 
\t animation-duration: 2s; 
 
} 
 

 
@keyframes fadeInOpacity { 
 
\t 0% { 
 
\t \t opacity: 0; 
 
\t } 
 
\t 100% { 
 
\t \t opacity: 1; 
 
\t } 
 
} 
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<button id="button1" class="button" >button1</button> 
 
<button id="button2" class="button" >button2</button>

Answer 3

Wenn Sie verwenden toggleClass wollen, müssen Sie es mit einem CSS-Übergang in Ihrem Stylesheet begleiten. Andernfalls verschwindet das Element einfach, da toggleClass keine Animation selbst bietet.

würde ein CSS Übergang zu Ihrem Stylesheet hinzuzufügen einfach sein, wäre alles, was notwendig wäre, um diese Eigenschaften auf die Regel für Ihre Klasse zu platzieren:

transition-property: all; 
transition-duration: 0.5s; /* or however long you need it to be */ 

Denken Sie daran, dass Eigenschaften wie display nicht animiert werden können , so müssen Sie das Aussehen mit einer Eigenschaft wie opacity steuern, die animiert werden kann, weil es eine Zahl ist.