CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sophie
Sophie

Reputation: 13

How to get a jquery .click() to not hide other .animate

So right now, I can get this div to slide onto the page. I want to be able to click one of the nav buttons and have another div appear.

I'm new to javascript/jquery, so I'm having some trouble. With this code, it makes the first div I animated disappear. 

$(document).ready({
  $(".firstDiv").animate({
    "opacity": 1,
    "margin-left": ".01%",
  });

  $("#button").click({
    $(".secondDiv").animate({
      "display": "initial",
      "opacity": 1,
      "margin-left": "3%"
    });
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="mainList">
  <button class="navig" id="button">|GALLERY|</button>
</li>

So how can I get this code to work?

Upvotes: 0

Views: 54

Answers (1)

Sergio Alen
Sergio Alen

Reputation: 724

Like Taplar said, the .ready() and .click() handlers accept an anonymous function as parameter so it needs to be like this:

$(document).ready(function(){
  $(".firstDiv").animate({
    "opacity": 1,
    "margin-left": ".01%",
  });

  $("#button").click(function(){
    $(".secondDiv").animate({
      "display": "initial",
      "opacity": 1,
      "margin-left": "3%"
    });
  })
})
.firstDiv, .secondDiv {
  opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainList">
  <button class="navig" id="button">|GALLERY|</button>
</div>
<div class="firstDiv">
  <p>First Div Content Here</p>
</div>
<div class="secondDiv">
  <p>Second Div Content Here</p>
</div>

Read the jQuery documentation on click events here.

Upvotes: 1

Related Questions