javascript – jQuery reverse conflict

Question:

I'm working on a site that I want it to change the read order when the window is < 800px, and I've implemented the code below. The problem is that it feels like it's crashing by chance and sometimes even when the window is going again it goes over 800px, and the menu is no longer clickable. I don't know if it's conflicting with the animation it has when window > 800px. Any tips? the site is at 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:

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

<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());

It is retrieving the <li> elements without the links. Changing the markup the problem disappears:

<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 making a lot of unnecessary DOM manipulations. I would personally develop the functionality with two separate menus and a little 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 that you can leave the two menus (and their respective events / animations) static and the CSS will display them according to the window size. While this type of build with display: none; it's not perfect either (ideally it would only have a single "fluid" menu) I believe it's the lesser of two evils in this case where there are animations involved.

Scroll to Top