CODEWITHSUNDEEP
javascriptjquery
MarkBurns
MarkBurns

Reputation: 468

Slow jQuery animation - Changing width

I have two divs. One is currently 0% and the other 100%. With the click function, I transform them into 12% and 88%.

Works like charm, but I would like the "process" to be slow, and not instant. Like a small animation.

This is the code I have:

<script>
$(document).ready(function(){
  $(".menu_logo").click(function(){
    $(".right").css("width","88%");
    $(".left").css("width","12%");
    $(".menu_logo").css("display","none");
   });
});
</script>

Upvotes: 0

Views: 456

Answers (2)

Roco CTZ
Roco CTZ

Reputation: 1117

To do this with jquery, you can use the following snip:

$("button").click(function() {$("div").animate({width:'350px'}, "slow")});

JSFiddle

Upvotes: 0

elzi
elzi

Reputation: 5672

Use CSS transitions. Add the following properties to your .right and .left classes.

CSS

-webkit-transition: width 150ms linear;
o-transition: width 150ms linear;
transition: width 150ms linear;

Upvotes: 1

Related Questions