垂直和水平扩展和动画 div答案

【问题标题】：Expand and Animate Div Vertically and Horizontally垂直和水平扩展和动画 div
【发布时间】：2012-04-05 13:02:03
【问题描述】：

我正在尝试使我的轮播滑块中的 div 切换并扩展为更大的 div，该 div 将适合轮播点击并重置为新的 div 内容。我看过的所有展开的 div 都只是滑下来了，旧的 div 信息仍然存在。

这是我找到的唯一 JavaScript，但我不知道如何在扩展时将其与新的 div 信息一起应用。

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

这是容器在展开之前和之后的 CSS。

.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;
}

【问题讨论】：

嗨，看看这里 - 这应该会有所帮助：jsfiddle.net/theguywholikeslinux/87f4Y（示例一切如何组合在一起）干杯，
这太棒了！我按原样添加了 jquery 脚本以及所有 CSS、HTML 和 JavaScript，但我仍然无法在我自己的文件中生成动画。还有其他一些我忘记添加的脚本吗？谢谢。
嗨，不用担心 :) 很高兴它有帮助，好的，嗯，你能在 jsfiddle 中重新创建你的问题吗？或者我希望您的页面中包含查询库，请尝试查询 alert('foo');或其他什么，看看是否发生警报？

标签： javascript jquery jquery-animate expand

【解决方案1】：

如果您想在动画之后应用数据更改，那么您需要为动画调用指定完成回调：

$("#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
      }
    }
  );
});

见jQuery animate documentation

【讨论】：