将动态文本动画添加到 nivo 滑块
Posted
技术标签:
【中文标题】将动态文本动画添加到 nivo 滑块【英文标题】：Add dynamic text animation to nivo slider 【发布时间】：2015-12-07 02:50:51 【问题描述】：寻找的最佳方法。尝试对动画使用 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" title="#htmlcaption1" />
<a href="http://dev7studios.com"><img src="images/up.jpg" data-thumb="images/up.jpg" title="This is an example of a caption" /></a>
<img src="images/walle.jpg" data-thumb="images/walle.jpg" data-transition="slideInLeft" />
<img src="images/nemo.jpg" data-thumb="images/nemo.jpg" 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 文件？ 【参考方案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();
);
);
【讨论】：
以上是关于将动态文本动画添加到 nivo 滑块的主要内容，如果未能解决你的问题，请参考以下文章