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

Question

I want to type a message and then when click on submit button call 'shoot' it will be display at the right side of the screen. However, I want the text to animate/slide in from right to left. How do i do it?

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

The issue is because you're calling animate() on the .putbullet element, not the .movethis which you append. You also need to set the styles in the style attribute, not the class - or better yet, put them in an external stylesheet.

Finally, you'll also need to set position: relative on the .putbullet so that the appended elements are contained within it when they animate. Try this:

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