jQuery Reverse conflict

Question

I’m working on a website that I want it to change the order of the read when the window is < 800px, and I implemented the code below. The problem is that it seems to be failing at random and sometimes even when the window is going back to over 800px, and the menu is no longer clickable. I don’t know if it’s because I’m conflicting with the animation you get when the window > 800px. Any hints? the site is on http://www.iwanttobesanta.com/news.php for anyone who wants to take a look.

    function mouseEnterAnimation(allowAnimation) {
    if (allowAnimation) {
        $('#upBar, nav ul').stop(true).animate({
            "height" : "60px"
        }, 200);

        $('nav ul li').stop(true).animate({
            "padding-top"    : "20px",
            "padding-bottom" : "20px",
            "height"         : "60px"
        }, 200);

        $('#lang').stop(true).animate({
            "padding-top"    : "23px",
            "padding-bottom" : "23px",
            "height"         : "60px"
        }, 200);

        $('#logo').stop(true).animate({
            "margin-top"  : "15px",
            "margin-left" : "10px"
        }, 200);
    }
}


// Animação quando o rato sai de cima
function mouseLeaveAnimation(allowAnimation) {

    if (allowAnimation) {

        $('#upBar, nav ul').stop(true).animate({
            "height": "45px"
        }, 200, function() {
            $('#upBar, nav ul').removeAttr("style");
        });

        $('nav ul li').stop(true).animate({
            "padding-top"    : "13px",
            "padding-bottom" : "13px",
            "height"         : "45px"
        }, 200, function() {
            $('nav ul li').removeAttr('style');
        });

        $('#lang').stop(true).animate({
            "padding-top"    : "16px",
            "padding-bottom" : "16px", 
            "height"         : "45px"
        }, 200);

        $('#logo').stop(true).animate({
            "margin-top"  : "7px",
            "margin-left" : "10px"
        }, 200, function () {
            $('#logo').removeAttr('style');
        });
    }
}


$(document).ready(function () {

    var $topNav = $('#upBar, nav'),
        allowAnimation = ($(window).width() >= 800);

    $topNav.hover(
        function(){
            mouseEnterAnimation(allowAnimation);
        },
        function() {
            mouseLeaveAnimation(allowAnimation);
        }
    );

    if (!allowAnimation) {
      $("nav ul").append($("li").get().reverse());
    }
    else {

    }

    $(window).resize(function() {
        allowAnimation = ($(window).width() >= 800);

        if (allowAnimation) {

              $('nav ul').show();
        }

            else {

              $('nav ul').hide();
              $("nav ul").append($("li").get().reverse());
        }


    });

    $("#btnMobile, #menu").on("click", function(){
    $("nav ul").stop(true).slideToggle();

    });

});

Answer 1

See that your links are outside the element <li>:

<a href="noticias.php"><li>Notícias</li></a>
<a href="#"><li>Logística</li></a>

When you call:

$("nav ul").append($("li").get().reverse());

Is recovering the elements <li> without the links. Changing the Markup the problem goes away:

<li><a href="noticias.php">Notícias</a></li>
<li><a href="#">Logística</a></li>

That said, I think your Javascript is getting too complicated and doing various unnecessary manipulations in the DOM. Personally I would develop the functionality with two separate menus and a bit of media query to hide or display the reduced menu.

.menuReduzido {
    display: block;
}
.menu {
    display: none;
}
@media (min-width: 800px) {
    .menuReduzido {
        display: none;
    }
    .menu {
        display: block;
    }
}

With this you can make the two menus (and their respective events/animations) static and the CSS will display them according to the size of the window. While this kind of building with display: none; also not perfect (the ideal would be to have only a single menu "fluid") believe that it is the lesser of two evils in this case where there are animations involved.