Question

我正在努力使我的旋转木马滑块中的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;
}

Answer 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

垂直和水平展开和动画Div

1 个答案: