Question

I have a grid of elements that need to be interactive. When one of the divs is clicked, it will grow to a larger size. For most elements “growing” a div from the bottom right corner is acceptable:

$(.my-div).animate({ width: "379px", height: "204px" });

However, there are some cases in which “growing” from the bottom right won’t work with the rest of the application.

I may need to grow from the top-right, for example. Any ideas? I like the simplicity of animating to a new width/height, but I’m not sure if it can achieve an effect other than dragging from the bottom-right corner.

Thanks in advance 🙂

Answer 1

There are a couple ways you could do it, either with jQuery animate like you mentioned, or CSS transitions. They would look something like

.child.clicked {
  height: 100px;
  width: 300px;
  transition: width 2s, height 2s;
-moz-transition: width 2s, height 2s;
-webkit-transition: width 2s, height 2s; 
-o-transition: width 2s, height 2s; 
}

or

  $('.child2').click(function() {
  $(this).animate({
    width: ['300px', 'swing'],
    height: ['100px', 'swing']
      }, { duration: "slow", easing: "easein" });
  });

Here is an example to toy with http://jsbin.com/uxicil/1/edit

There are a number of easing properties and things to tweak until you get it exactly how you want.