CODEWITHSUNDEEP
jquery
NoName84
NoName84

Reputation: 407

Jquery - onClick - slideUp - slideDown animation

I have this HTML code:

<div class = "box">
    <h2>Hello</h2>
    <p>This is a paragraph</p>
</div>
<button class = "btn">Click Here</button>

and I have this CSS code:

.box{
  width:300px;
  height:300px;
  border:2px solid black;
}
.box h2,p{
  text-align:center;
}

and my jQuery code:

$(document).ready(function(){
    $(".btn").on("click", function(){
        $("h2").toggle(1000);
    });
});

At this time when I click on my button the h2 is going up and towards left and disappear, and when I click the button again the animation is going down, from left to right and disappear. I would like to have the toggle animation but i would like the h2 to slideUp and slideDown from the middle.

Upvotes: 1

Views: 3274

Answers (1)

Sam
Sam

Reputation: 1707

So what exactly is the problem? the animation in the snippet goes back and forth and I think that is what you'd want?

$(document).ready(function(){
    $(".btn").on("click", function(){
        $(".box1 h2").slideToggle();
    });
  $(".btn2").on("click", function(){
        $(".box2 h2").animate({
          height: "toggle",
          opacity: "toggle"
        });
    });
});
.box{
  width:200px;
  height:100px;
  border:2px solid black;
  display: inline-block;
  float: left;
}
.box h2,p{
  text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "box box1">
    <h2>Hello</h2>
    <p>This is a paragraph</p>
</div>
<button class = "btn">Click Here</button>
<div class = "box box2">
    <h2>Hello2</h2>
    <p>This is a paragraph2</p>
</div>
<button class = "btn2">Click Here</button>

Upvotes: 3

Related Questions