JQuery the menu effect works only once

Navigation
3

link

Hello everyone. Thanks in advance for your help.

In the link I have attached, I am trying to animate the menu bar. The idea is that each time you click on a link, the bar disappears completely and reappears.

Problems: The animation is done once at the beginning and then it is not repeated. Maybe it's because I have not managed to remove the class ('disappear) or because of the fixed position of the object?

HTML 

<nav class="menu menu--antonio header-nav-wrap">
                <ul class="menu__list header-nav">
                    <li class="menu__item menu__item--current"><a href="#home" class="menu__link smoothscroll" id="uno">Starseite</a></li>
                    <li class="menu__item"><a href="#about" class="menu__link smoothscroll" id="dos">Über mich</a></li>
                    <li class="menu__item"><a href="#interactive" class="menu__link smoothscroll" id="tres">Interaktiv</a></li>
                    <li class="menu__item"><a href="#course" class="menu__link smoothscroll" id="cuartro">Coaching</a></li>
                    <li class="menu__item"><a href="#kontakt" class="menu__link smoothscroll" id="cinco">Kontakt</a></li>
                    <li class="menu__line"></li>
                </ul>
            </nav>

JS (JQuery) 

$(document).ready(function () {
    $allDocument = $(window);
    $desplazamiento = $('.smoothscroll');
    var cabecera = $('.main-header');

    $desplazamiento.click(function(e){     

        $('body,html').animate({
            scrollTop: $(this.hash).stop().offset().top 
        },1500);

        cabecera.addClass('desaparece');
});

CSS 

.desaparece {
    animation-name: fadeIn;
-moz-animation-name: fadeIn;
-webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;

}

Thanks for your help. Greetings

    
asked by mayte labarga 28.09.2018 в 12:04
source

2 answers

3

The problem is that CSS animations can not be restarted simply by adding the class again.

I recommend you read this article with several alternatives, this other (based on the previous one and with an alternative solution), this another (with another solution) and this question.

I have implemented one of them (of the first article) in which the class is deleted and added again. The key is that, in between, it calls void this.offsetWidth; that forces the browser to recalculate the DOM element (Reflow) and thus restarts the animation. Here more info. 

$(document).ready(function () {
    $allDocument = $(window);
    $desplazamiento = $('.smoothscroll');
    var cabecera = $('.main-header');


    $desplazamiento.click(function(e){       

        $('body,html').animate({
            scrollTop: $(this.hash).stop().offset().top 
        },1500);

        //Eliminamos la clase "desaparece"
        cabecera.removeClass("desaparece");   
        //Forzamos el reflow del elemento con offsetWidth
        void this.offsetWidth;
        //Volvemos a añadir la clase para reiniciar la animación
        cabecera.addClass("desaparece");          
    });
}
    
answered by 28.09.2018 / 12:50
source
0

Ok, identifying the problem on the page is impractical because it is not an adequate sand-box, for your next question, you could include the problem in a fiddle so that you can make a correct test and you can say that it's completely possible with the Stack code snippet tool.

Turning to the question in question, I think the error lies in that you are working with an animation with CSS, it would be more practical if you did everything with JQuery, as follows:

  

With fadeIn and fadeOut 

$("nav ul li").click(function(){

  $("nav").fadeOut();
  setTimeout(function(){
  
    $("nav").fadeIn();
  
  }, 2000);

});
* {

  margin: 0 ;
  padding: 0;

}

body {

  width: 500px;
  height: 600px;


}

nav {

  width: 100%;

}

nav ul {

  height: 50px;
  margin-right: auto;
  margin-left: auto;
  background-color: aqua;
  width: 100%;
  display: flex;
  align-items: center;

}

nav ul li {

  display: inline-flex;

}

nav ul li a {

  padding-left: 20px;
  padding-right: 20px;
  color: black;
  text-decoration: none;
  font-size: 15px;

}

nav ul li a:hover {

  color: white;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="menu menu--antonio header-nav-wrap">
                <ul class="menu__list header-nav">
                    <li class="menu__item menu__item--current"><a href="#home" class="menu__link smoothscroll" id="uno" >Starseite</a></li>
                    <li class="menu__item"><a href="#about" class="menu__link smoothscroll" id="dos" >Über mich</a></li>
                    <li class="menu__item"><a href="#interactive" class="menu__link smoothscroll" id="tres" >Interaktiv</a></li>
                    <li class="menu__item"><a href="#course" class="menu__link smoothscroll" id="cuartro" >Coaching</a></li>
                    <li class="menu__item"><a href="#kontakt" class="menu__link smoothscroll" id="cinco">Kontakt</a></li>
                    <li class="menu__line"></li>
                </ul>
            </nav>
  

With visibility and opacity: 

$("nav ul li").click(function(){

  $("nav").css({"visibility": "hidden","opacity": "0"});
  setTimeout(function(){
  
    $("nav").css({"visibility": "visible","opacity": "1"});
  
  }, 2000);

});
* {

  margin: 0 ;
  padding: 0;

}

body {

  width: 500px;
  height: 600px;


}

nav {

  width: 100%;
  transition: .2s; /*agrego un transition*/

}

nav ul {

  height: 50px;
  margin-right: auto;
  margin-left: auto;
  background-color: aqua;
  width: 100%;
  display: flex;
  align-items: center;

}

nav ul li {

  display: inline-flex;

}

nav ul li a {

  padding-left: 20px;
  padding-right: 20px;
  color: black;
  text-decoration: none;
  font-size: 15px;

}

nav ul li a:hover {

  color: white;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="menu menu--antonio header-nav-wrap">
                <ul class="menu__list header-nav">
                    <li class="menu__item menu__item--current"><a href="#home" class="menu__link smoothscroll" id="uno" >Starseite</a></li>
                    <li class="menu__item"><a href="#about" class="menu__link smoothscroll" id="dos" >Über mich</a></li>
                    <li class="menu__item"><a href="#interactive" class="menu__link smoothscroll" id="tres" >Interaktiv</a></li>
                    <li class="menu__item"><a href="#course" class="menu__link smoothscroll" id="cuartro" >Coaching</a></li>
                    <li class="menu__item"><a href="#kontakt" class="menu__link smoothscroll" id="cinco">Kontakt</a></li>
                    <li class="menu__line"></li>
                </ul>
            </nav>

The difference between the two methods is mainly the permanence on the page, if you use fadeIn() and fadeOut() is how you will assign to the element the property css display: none ; instead, if you use directly the properties visibility and opacity you are only placing the entire element transparent.

I hope it helps you!

    
answered by 28.09.2018 в 13:04
Problem in Java! (impression of a value returned within an if) Create a repetition or route every certain data from an explode