CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Snorlax
Snorlax

Reputation: 4735

jQuery animate Syntax

I'm reading the animate doc on jQuery, but after numerous attempts, I figured the good people at SO can help...

Basically, I can't get the duration, specialeasing and complete function to work, I got the complete function to work at one point but when I deleted duration or something, it didn't work again:

Fid: https://jsfiddle.net/jzhang172/mofnf7ua/

$(function(){

$(".hey").click(function(){ 
var height=$(".two").height(); 

console.log(height);
if (height >400){
$(".two").animate({
height:"0px",
opacity:0
},{duration:1000},complete:function(){alert('hey');
}
);
}//ifstatement end
else {
$(".two").animate({
height:"500px",
opacity:1


});
}
});//clickfunction end


});//function end
.hey{
  background:blue;
  height:50px;
  width:50px;
  transition:1s;
   
}
.two{
  background:red;
    height:500px;
  width:500px;
  transition:1s;
}
.no{
    opacity:1;
display:block;
  transition:1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="hey"></div>

<div class="hey two" id="two">fffffffff</div>

Upvotes: 0

Views: 65

Answers (2)

Hayk Inanc
Hayk Inanc

Reputation: 31

You have a little mistake in js code. You forgot to close the if statement with } bracket.

Here is the right JS code:

 $(function(){

  $(".hey").click(function(){ 
    var height=$(".two").height(); 
        console.log(height);
    if (height >400){
      $(".two").animate({
        height:"0px",
        opacity:0
       }, {
            duration: 1000,
            complete: function(){alert('hey')}
           } 
       )     
     }//ifstatement end
    else {
      $(".two").animate({
        height:"500px",
        opacity:1
      });
    }   
  });//clickfunction end


});//function end

Upvotes: 1

stjns
stjns

Reputation: 1510

Your syntax is off. You are missing a closing parenthesis at the end of the statement. Additionally, you don't actually need to actually put the word "duration" or "complete" in the call. Try this: 

$(".two").animate({
    height:"0px",
    opacity:0
}, 1000, function(){
    alert('hey');
});

The docs put the words "duration" and "animate" in there as placeholders to let you know where they should go.

Upvotes: 0

Related Questions