jQuery Toggle Animation is not working

Asked

Viewed 376 times

2

I have this code, and I would like you to toggle the click but it’s not working. Any tips sff?

HTML:

<body>
<img id="topBar" src="imgs/topBar.png">
<div id ="wrapper">
    <nav>
        <a href="index.php"><img id="logo" src="imgs/logo.jpg"></a>
        <a href="index.php"><img id="logoMob" src="imgs/logo.jpg"></a>
        <div id ="btMob"><h1>MENU</h1></div>
        <ul>
            <li><a href="Linguas.php">Línguas</a></li>
            <li><a href="Cursos.php">Cursos</a></li>
            <li><a href="Learning_Portuguese.php">Learning Portuguese</a></li>
            <li><a href="Testemunhos.php">Testemunhos</a></li>
            <li><a href="Sobre_nos.php">Sobre nós</a></li>
            <li><a href="FAQ.php">FAQ</a></li>
            <li id ="cont"><a>contactos</a><img src="imgs/arrow.png"></li>
        </ul>
    </nav>

CSS:

#logo {
    height: 100%;
    float: left;
    width: auto;
    border-left: 1500px solid #fff;
    margin-left: -1500px;
}
#logoMob {
    height: 100%;
    float: left;
    width: auto;
    margin: 0;
    display: none;
}
#btMob {
    width: 200px;
    cursor: pointer;
    height: 100%;
    margin: 0 0 0 63px;
    background-color: #fff;
    text-align: center;
    display: none;
    position: absolute;
}


@media only screen and (max-width: 900px) {
#logo {
        display: none;
    }
#logoMob {
        display: inline;
    }
    #btMob {
        display: block;
    }
}

jQuery:

       $('#logoMob, #btMob').click(function() {
          $('nav ul').stop(true).animate({
            left:"328px"
          }, 300, 'linear');
        }, function() {
          $('nav ul').stop(true).animate({
            left:"0"
          }, 300, 'linear');
        });
jquery animation toggle

  • Place html, so it’s not easy to help...

  • You’re right, sorry, I’ve already edited

  • Tip: no use in Brazil Se Favor, much less sff. Anyway, "some F-tip?" isn’t a big question ;)

  • Okay, but I’m not from Brazil. I’m from Portugal

2 answers

2


The .click() jQuery does not support more than one function as parameter. The .hover() is that you have that option for the "Hover-out".

What you can do is create a flad/flag: http://jsfiddle.net/tm27p/

var bandeira = false;
$('#logoMob, #btMob').click(function () {
    $('nav ul').stop(true).animate({
        left: (bandeira = (!bandeira)) ? "328px" : "0px"
    }, 300, 'linear');
});
  • 1

    Very obvious, I thought the click had the same function as the Hover

0

It doesn’t work because clicking is running the second function:

 $('#logoMob, #btMob').click(function() {

     //NÃO EXECUTA ESSE TRECHO AO FAZER CLICK
      $('nav ul').stop(true).animate({
        left:"328px"
      }, 300, 'linear');
    }, function() {

      //EXECUTA ESSE TRECHO AO FAZER CLICK
      $('nav ul').stop(true).animate({
        left:"0"
      }, 300, 'linear');
    });

Browser other questions tagged jquery animation toggle

You are not signed in. Login or sign up in order to post.