如何对引导传送带上显示的文本进行动画处理

How can I animate the text that appears on my Bootstrap carousel?

本文关键字：文本 处理 动画 显示 传送带      更新时间：2023-09-26

我的网站上有一个引导轮播，其中包含三个元素：

            <a><img data-src="img" alt="Third slide" src="img">
        </a>
         <div class="carousel-caption">             
        <h2>  
  <ul id="columncarro4" type="circle" style="">
          <li>text1</li><br>
          <li>text</li><br>
          <li>text</li>
          </ul>
         </h2>
        </div>
      </div>

还有一些Javascript可以按照我想要的方式移动文本的位置：

      $(document).ready(function(){
                $('#columncarro4').animate({
                           'margin-left':'-3%'
                },500).animate({
                           'margin-left':'-255px'
                },'slow');
      });

我希望第二张幻灯片的动画在第二张轮播幻灯片出现时开始。

我有三个动画，但它们从网页开始开始，并且它们没有与幻灯片一起出现。

 $(document).ready(function(){
                $('#columncarro4').animate({...

该代码将在文档就绪 - 页面完全加载时启动 animate 函数。您必须用另一个事件来包装它 - 您希望它在发生什么之后何时开始？例如，如果您希望动画在点击轮播后开始，则应执行以下操作：

$(document).ready(function(){
       $('#columncarro4').click(function(){
            $('#columncarro4').animate({
                       'margin-left':'-3%'
            },500).animate({
                       'margin-left':'-255px'
            },'slow');
        });
  });

使用 SetInterval（）

编辑：

尝试这样的事情：

$(document).ready(function(){
    var interval;
    function animate() {
        $('#columncarro4').animate({'margin-left':'-3%'}, 500)
        .animate({'margin-left':'-255px'}, 'slow');
    }
    function start() {
        interval = setInterval(animate, 5000);
    }
    $('#columncarro4').click( function() {
        clearInterval(interval);
        animate();
        start();
    });
    start();
});

或者，如果您有一个在 carusel 更改时触发的事件，则可以绑定到该事件。

相关文章：