Question

i have an div called foo. This is the css for the div:

background-color: #FFFF00;
float:right;
width: 50px;
height: 50px;

its in the upper right corner of another div.
Well if i click on it, i want to change the content SMOOTHLY, and change the size/css SMOOTHLY to this:

background-color: #FFFF00;
float: right;
width: 255px;

And i want to toggle it… I know its all possible with jQuery, but how? What functions can i use? And what is the best way to do it?

Greetings

Answer 1

Yep, you can do it with toggle function and animate, see this example:

    $(document).ready(function(){   $(".slide").toggle(
    function () {
        $("#slider").animate({marginLeft: "-400px"}, 1000, "easeInOutQuad")
    },
    function () {
        $("#slider").animate({marginLeft: 0}, 1000, "easeInOutQuad")
    }
);});

You can change the parameters to fit your needs