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

Question

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

 $('.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> 

Answer 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>