jQuery reverse conflict

3

I'm working on a site that wants it to change the order of the li when the window has < 800px, and implemented the code below. The problem is that it seems to be failing at random and sometimes even when the window is going to go over 800px again, and the menu is no longer clickable. I do not know if it's because it's conflicting with the animation you have when the window > 800px. Any tips? the site is at link 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();

    });

});
    
asked by anonymous 18.03.2014 / 16:01

1 answer

0

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

You are recovering the <li> elements without the links. By changing the markup the problem disappears:

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

That being said, I think your JavaScript is getting too complicated and doing several unneeded DOM manipulations. I would personally 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 leave the two menus (and their respective events / animations) static and CSS will display them according to the size of the window. While this type of construction with display: none; is also not perfect (ideally just having a single "fluid" menu) I believe it is the lesser of two evils in this case where animations are involved.

    
18.03.2014 / 17:16