将动态文本动画添加到 nivo 滑块答案

【问题标题】：Add dynamic text animation to nivo slider将动态文本动画添加到 nivo 滑块
【发布时间】：2015-12-07 02:50:51
【问题描述】：

寻找将动态文本动画添加到 nivo 滑块的最佳方法。尝试对动画使用 animate.css，但文本没有动画。我尝试在滑块外的一些文本中添加动画，效果很好。所以不知道为什么它在滑块中不起作用。将包含我尝试修改的 nivo demo.html 文件。任何帮助，将不胜感激。

<head>
<title>Nivo Slider Demo</title>
<link rel="stylesheet" href="../themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/light/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/dark/dark.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/bar/bar.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../animate.css" type="text/css" media="screen" />

<body>
<div id="wrapper">
    <a href="http://dev7studios.com" id="dev7link" title="Go to dev7studios">dev7studios</a>

    <div class="slider-wrapper theme-default">
        <div id="slider" class="nivoSlider">
            <img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" title="#htmlcaption1" />
            <a href="http://dev7studios.com"><img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" /></a>
            <img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
            <img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" />
        </div>
        <div id="htmlcaption1" class="nivo-html-caption animated bounceIn">
            <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. 
        </div>
        <div id="htmlcaption" class="nivo-html-caption animated bounceIn">
            <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. 
        </div>
    </div>
    <div class="animated bounceIn" style="position: absolute; top: 300px; left: 30px;">
        <h1 style="font: 20px;">this is a test</h1>
    </div>
</div>
<script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="../jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect: 'fade'
    });
});
</script>

【问题讨论】：

您可以给我们任何网址吗？
如何将样式表、js 文件和图像等项目文件包含到 jsfiddle 之类的东西中，而不必将所有 css 合并到一个文件中，并将所有 js 合并到一个文件中？
这不是wordpress吗？我猜你有一个域...
不使用wordpress。刚刚从 git 本地下载了滑块文件。
哦，好的，知道了！至少你可以显示你的 css 文件？

标签： css wordpress animation nivo-slider

【解决方案1】：

abimatecss 类不能直接工作，如果你想使用 animatecss 类，你应该使用 nivo 滑块的 beforeChange 和 afterChange 事件，例如。或者查看我的 Github 项目

customize nivo slider with animated caption

 $(window).on("load", function(){

    $(".slider-wrapper").nivoSlider({

         animSpeed    : 900,
         controlNav   : false,
         nextText     : '<i class="fa fa-chevron-right" aria-hidden="true"></i>',
         prevText     : '<i class="fa fa-chevron-left" aria-hidden="true"></i>',
         beforeChange : function(){

            $('.nivo-caption p').removeClass('animated slideInLeft').hide();
            $('.nivo-caption h2').removeClass('animated slideInRight').hide();
            $('.nivo-caption span button').removeClass('animated fadeInUp').hide();


         },
         afterChange : function(){

            $('.nivo-caption p').addClass('animated slideInLeft').show();
            $('.nivo-caption h2').addClass('animated slideInRight').show();
            $('.nivo-caption span button').addClass('animated fadeInUp').show();


         }

    });
 });

【讨论】：