附加 div 元素，然后使用 JQUERY 从右到左进行动画处理答案

【问题标题】：Append div element and then animate from right to left using JQUERY附加 div 元素，然后使用 JQUERY 从右到左进行动画处理
【发布时间】：2017-04-19 06:42:52
【问题描述】：

我想输入一条消息，然后当单击提交按钮调用“拍摄”时，它将显示在屏幕右侧。但是，我希望文本从右到左动画/滑入。我该怎么做？

$('.submmit').click(function() {
  var c = "<div class='movethis' class='width: 40px;height: 50px;position: absolute;right: 0;'>" + $(".mytxt").val() + "</div>";
  $(".putbullet").append(c).animate({ "left": "0px" }, "slow");
  $(".movethis").animate({ "left": "0px" }, "slow");
  $(".movethis").css('right', '');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="text" name="txt" class="mytxt">
  <input type="button" class="submmit" value="Shoot">
</div>
<div class="areaofcontent" style="width:68%;float:right; background-color:#eee;height:400px;overflow-y:scroll;">
  <div class="putbullet"></div>
</div>

【问题讨论】：

有一个错字：class='width: 。应该是style='width: JSFiddle
在文本框内滑动？

标签： javascript jquery html css jquery-animate

【解决方案1】：

问题是因为您在 .putbullet 元素上调用 animate()，而不是您附加的 .movethis。您还需要在style 属性中设置样式，而不是class - 或者更好的是，将它们放在外部样式表中。

最后，您还需要在.putbullet 上设置position: relative，以便附加元素在动画时包含在其中。试试这个：

$('.submmit').click(function() {
  $('<div class="movethis">' + $(".mytxt").val() + '</div>').appendTo('.putbullet').animate({
    "left": "0px"
  }, "slow");
});

.putbullet {
  position: relative;
}
.movethis {
  width: 40px;
  height: 50px;
  position: absolute;
  right: 0;
}
.areaofcontent {
  width: 68%;
  float: right;
  background-color: #eee;
  height: 400px;
  overflow-y: scroll;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="text" name="txt" class="mytxt">
  <input type="button" class="submmit" value="Shoot">
</div>
<div class="areaofcontent">
  <div class="putbullet"></div>
</div>

【讨论】：