使用animate完成下午的sendMess.html的消息发送,要求每个div消息从右边往左边移动最后消息
时间: 2024-02-22 12:55:30 浏览: 52
JQuery 使用animate让DIV变化或左右移动
的位置在左边,类似于聊天软件中的消息发送效果。
首先,在sendMess.html中,我们需要为每个消息添加一个class,例如"message",并且给每个消息添加一个data属性,用来记录消息是否已经被发送。
```
<div class="message" data-sent="false">
<p>这是一条消息</p>
</div>
```
接下来,在JavaScript中,我们可以使用jQuery的animate方法来实现消息的移动。我们需要先获取所有未发送的消息,然后按照顺序依次移动它们的位置。最后,我们需要将已发送的消息的data-sent属性设置为true,这样它们不会再次被移动。
下面是实现的代码:
```
$(document).ready(function(){
var messages = $('.message[data-sent="false"]');
var delay = 0;
messages.each(function(){
var message = $(this);
message.animate({
left: 0
}, 500, function(){
message.attr('data-sent', 'true');
});
delay += 200;
message.delay(delay);
});
});
```
这段代码会将所有未发送的消息从右边移动到左边,并且每个消息之间会有200ms的延迟。你可以根据需要调整延迟时间。
阅读全文