將動態文本動畫添加到nivo滑塊

尋找將動態文本動畫添加到nivo滑塊的最佳方法。嘗試將animate.css用於動畫，但文字不具動畫效果。我試圖給滑塊外的某些文本添加一個動畫，並且它工作正常。所以不知道爲什麼它不能在滑塊中工作。將包括我試圖修改的nivo demo.html文件。任何幫助，將不勝感激。將動態文本動畫添加到nivo滑塊

<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>

來源

2015-09-10 web-dev

是否有可能你給我們的任何網址？ – gioNicol

如何將樣式表js文件和圖像等項目文件包含到jsfiddle之類的東西中，而無需將所有css合併到一個文件中，並將所有js合併到一個文件中？ –

是不是這個WordPress的？我猜你有一個域名... – gioNicol

，如果你想使用animatecss類，你應該使用NIVO滑塊beforeChange和改動後的事件，例如abimatecss類不直接合作。或者檢查我的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(); 


     } 

    }); 
});

來源

2017-03-01 10:56:11

將動態文本動畫添加到nivo滑塊

回答

相關問題