在垂直和水平方向上对Div进行扩展和动画处理

Question

I'm trying to make it so that the divs within my carousel slider will toggle and expand into a larger div that will fit within the carousel on-click and reset with new div contents. All the expanding divs I've looked at have only slid down, and the old div information remains.

This is the only JavaScript I've found, but I do not know how to apply it with new div information upon expanding.

$("#expand").click(function(){
    $(".article-container").animate({
        width: "100px",
        height: "100px",
        top: "-50px",
        left: "-50px",
        opacity: 0.6,
    }, 1500 );
});

Here is the CSS for the container before expanding and after.

.article-container{
    float: left;
    width: 193px;
    height: 360px;
    margin: 0 13px 0 0;
}

.article-container-expand{
    float: left;
    width: 500px;
    height: 1000px;
    margin: 0 13px 0 0;
}

Answer 1

If you want to apply data changes after the animation then you need to specify a completion callback for the animate call:

$("#expand").click(function(){
  $(".article-container").animate({
      width: "100px",
      height: "100px",
      top: "-50px",
      left: "-50px",
      opacity: 0.6,
    }, 
    { duration: 1500,
      complete: function() {
        // update the content here
        // this is the item being animated
      }
    }
  );
});

See the jQuery animate documentation