jquery使用animate鼠标点击发送消息，每个div消息从右边往左边移动最后消息

可以通过jQuery的animate()方法来实现这个功能，具体步骤如下：

1. 给每个消息都添加一个唯一的ID，方便后续操作。
2. 给发送按钮添加一个点击事件，当点击按钮时，获取输入框里的文本内容。
3. 将文本内容插入到页面中，每个消息都放在一个div里。
4. 给每个消息的div设置一个初始位置，即从右边开始移动。
5. 使用animate()方法将每个消息div从右边移动到左边，同时设置动画持续时间和回调函数，当动画完成后将该消息div从页面中删除。

下面是一个简单的示例代码：

HTML:

<input type="text" id="input">
<button id="send">发送</button>
<div id="chat-box"></div>

CSS:

#chat-box {
  position: relative;
  overflow: hidden;
  height: 200px;
  width: 300px;
  border: 1px solid #ccc;
}

.message {
  position: absolute;
  top: 0;
  right: -200px;
  width: 200px;
  height: 40px;
  line-height: 40px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  text-align: center;
}

JavaScript:

$(function() {
  var messageId = 0;

  $('#send').click(function() {
    var message = $('#input').val();
    if (message) {
      var id = 'message-' + messageId++;
      var $message = $('<div></div>').attr('id', id).addClass('message').text(message);
      $('#chat-box').append($message);
      var width = $message.outerWidth();
      $message.css('right', -width);
      $message.animate({right: 0}, 500, function() {
        $message.delay(2000).fadeOut(500, function() {
          $message.remove();
        });
      });
      $('#input').val('');
    }
  });
});

在这个示例代码中，我们首先给每个消息div添加了一个类名为“message”，并且设置了一个初始位置，即从右侧开始移动。然后，在点击发送按钮时，我们获取输入框中的文本内容，并将其插入到页面中。接着，使用animate()方法将该消息div从右侧移动到左侧，并设置动画持续时间为500毫秒。当动画完成后，我们使用delay()方法将该消息div延迟2秒钟后再进行fadeOut()淡出动画，并在淡出动画完成后将该消息div从页面中删除。