CODEWITHSUNDEEP
javascriptjqueryhtmlcss
George Reason
George Reason

Reputation: 173

jQuery slide out animation

I am working on a slide out bar for a project I am working on and I am having a hard time getting an animation to work.

My Goal is to have it slide out from left to right not appear from the top like it is now.

Below is my jQuery code as well as my jsfidde

Thanks in advance George

http://jsfiddle.net/tXye8/

$(document).ready(function(){
var $button = $('#sideoutButton');
var $contain = $('#slideoutContain');
var containWidth = $('#slideoutContain').width();

//Hide the box
$contain.hide();

//Hide or show the container on button click
$button.click(function(){
    if ($contain.is(":visible")) {
        $contain.hide();
        $button.css("left", 0);
    }
    else {
        $contain.show(400, buttonMove());
    }
});

function buttonMove(){
    $button.css("left", function(value) {
        return 0 + containWidth;
    });
}
  });

Upvotes: 0

Views: 1167

Answers (1)

Jason
Jason

Reputation: 52523

If you know how wide it's supposed to be, you can achieve this with CSS:

#mycontainer {
    width: 0;
    transition: width 400ms ease;
}

#mycontainer.expand {
    width: 400px; //or whatever your width is
}

and just use JS/jQuery to toggle a class on #mycontainer

Upvotes: 4

Related Questions