Question

i am trying to improve my jQuery skills and therefore i write a own lightbox.

But there is one thing which drives me crazy. How can i animate a div like the other lightboxes. Starting in the middle and spread out to each side. I am helpless.

Is that possible with that special easing properties, which are provided by jQuery?

Here is jsFiddle to inspect.

$('#clickme').click(function() {
  $('#book').animate({
    width: 'toggle',
    height: 'toggle'
  }, {
    duration: 5000,
    specialEasing: {
      width: 'linear',
      height: 'easeOutBounce'
    },
    complete: function() {
      $(this).after('<div>Animation complete.</div>');
    }
  });
});

I hope someone can help me 🙂

Answer 1

You can also animate the top and left position of the div to give the effect of resizing relative to the center of the element.

jsFiddle example

$('#clickme').click(function() {
    $('#lightbox').fadeIn();
    $('#lightbox').animate({
        width: 500,
        height: 250,
        top:5,
        left:10
    });
});​