[英]Append div element and then animate from right to left using JQUERY
我想輸入一條消息,然后在單擊“提交”按鈕時單擊“拍攝”,它將顯示在屏幕的右側。 但是,我希望文本從右向左滑動/滑動。 我該怎么做?
$('.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>
問題是因為您是在.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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.