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要素ではなく、あなたが追加し.movethisにanimate()を呼び出しているので、問題があります。また、ではなく、styleアトリビュートにスタイルを設定する必要があります。それ以上の場合は、外部スタイルシートに配置することをお勧めします。

最後に、に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>