jq div文字轮播动画

你可以使用jQuery实现文字轮播动画。下面是一个示例代码，可以让文字从右侧进入并从左侧出去。

HTML代码：

<div class="slider">
  <div class="slider-container">
    <div class="slider-item">第一条消息</div>
    <div class="slider-item">第二条消息</div>
    <div class="slider-item">第三条消息</div>
  </div>
</div>

CSS代码：

.slider {
  width: 300px;
  overflow: hidden;
}

.slider-container {
  display: flex;
  animation: slider 10s infinite;
}

.slider-item {
  padding: 10px;
  background-color: #eee;
  margin-right: 10px;
}

@keyframes slider {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(-100%);
  }
  55% {
    transform: translateX(-100%);
  }
  60% {
    transform: translateX(-200%);
  }
  85% {
    transform: translateX(-200%);
  }
  90% {
    transform: translateX(-300%);
  }
  100% {
    transform: translateX(-300%);
  }
}

JavaScript代码：

$(function() {
  var sliderWidth = $('.slider').width();
  var sliderItemWidth = $('.slider-item').width();
  var sliderItemCount = $('.slider-item').length;
  var sliderContainerWidth = sliderItemCount * sliderItemWidth + sliderWidth;
  $('.slider-container').css('width', sliderContainerWidth + 'px');
});

这段代码会根据文字数量和容器宽度动态调整容器宽度。你可以根据自己的需求进行修改。