CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapweb
Vin-S
Vin-S

Reputation: 1

Jquery: Can't get animate to work

<div class="col-md-3" id="button1">
    <p id="text1">Button1</p>
</div>
<div class="col-md-3" id="animate1"></div>


#animate1 {
    margin-left:1%;
    margin-right:1%;
    width:23%;
    background-color:blue;
}

#button1 {
    background-color:white;
    text-align:center;
    margin-left:1%;
    margin-right:1%;
    width:23%;
    margin-top:0%;
    margin-bottom:0%;
    padding-top:1.5%;
    padding-bottom:1.5%;
}

#button1:hover {
    background-color:red;
}


$("#button1").click(function () {
    $("#animate1").animate({
        "width": "70%",
            "left": "+=50px"
    }, "slow");
});

I was tying to use Jquery to do some animation. What I want to achieve is when button1 was clicked, animate1 would move and change width. However it simply won't work...

Any possible solutions? Thanks a lot.

Upvotes: 0

Views: 69

Answers (3)

sb9
sb9

Reputation: 1082

Set a height for the animated object. For example 

$("#button1").click(function() {
    $("#animate1").animate({
     "height": "10px",              
     "width": "70%",
     "left": "+=50px"
    },"slow");
});

should do it

Upvotes: 0

Dimag Kharab
Dimag Kharab

Reputation: 4519

$(function() {

  $("#button1").click(function() {
    $("#animate1").animate({
      "width": "70%",
      "left": "+=50px"
    }, "slow");
  });
})
#animate1 {
  margin-left: 1%;
  margin-right: 1%;
  width: 23%;
  background-color: blue;
  height:2%;
}
#button1 {
  background-color: white;
  text-align: center;
  margin-left: 1%;
  margin-right: 1%;
  width: 23%;
  margin-top: 0%;
  margin-bottom: 0%;
  padding-top: 1.5%;
  padding-bottom: 1.5%;
}
#button1:hover {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="col-md-3" id="button1">
  <p id="text1">Button1</p>
</div>
<div class="col-md-3" id="animate1">test</div>

Upvotes: 0

jAndy
jAndy

Reputation: 236022

The <div> element you would like to animate, has no height. Animation works, you're just not able to see it. Set any height and you're good.

Upvotes: 3

Related Questions