javascript - 动画html元素-flexslider

动画播放后，如何在flexslider的每个幻灯片上设置html元素的动画。在互联网上搜索了几个小时。找不到任何教程或有帮助的内容。可以给我展示一下如何做的例子。 Link to jsfiddle

html

<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="http://placehold.it/350x150">
          <div><h1>heading</h1></div>
          <div><h2>heading</h2></div>
    </li>
    <li>
      <img src="http://placehold.it/350x150">
    </li>
    <li>
      <img src="http://placehold.it/350x150">
    </li>
    <li>
      <img src="http://placehold.it/350x150">
    </li>
  </ul>
</div>

js

$('.flexslider').flexslider({
    animation: "slide"
  });

$("div h1").fadeIn(3000);
$("div h2").animate({left:'250px'});

最佳答案

您可以使用flexslider提供的回调函数来实现。

回调函数：

start: function(){} //Fires when the slider loads the first slide
before: function(){} //Fires asynchronously with each slider animation
after: function(){} //Fires after each slider animation completes

您可以参考此文档以获取有关可用回调函数的更多信息：http://www.woothemes.com/flexslider/

现在，我使用可能的淡入淡出的方法更新了小提琴。

以下是对代码所做的更改，这是updated fiddle link

的HTML

<div class="flexslider">
<ul class="slides">
    <li>
        <img src="http://placehold.it/350x150">
        <div>
            <h1>heading</h1>
        </div>
        <div>
            <h2>heading</h2>
        </div>
    </li>
    <li>
        <img src="http://placehold.it/350x150">
        <div>
            <h1>heading</h1>
        </div>
        <div>
            <h2>heading</h2>
        </div>
    </li>
    <li>
        <img src="http://placehold.it/350x150">
        <div>
            <h1>heading</h1>
        </div>
        <div>
            <h2>heading</h2>
        </div>
    </li>
    <li>
        <img src="http://placehold.it/350x150">
        <div>
            <h1>heading</h1>
        </div>
        <div>
            <h2>heading</h2>
        </div>
    </li>
</ul>

Java脚本

  $("div h1").css('display', 'none'); //hide h1
  $("div h2").css('display', 'none'); //hide h2
  $('.flexslider').flexslider({
  animation: "slide",
  start: function () {

      $("div h1").fadeIn(1000);
      $("div h2").fadeIn(1000);

  },
  after: function () {

      $("div h1").fadeIn(1000);
      $("div h2").fadeIn(1000);

  },
  before: function () {

      $("div h1").css('display', 'none');
      $("div h2").css('display', 'none');

  }
 });

我希望这可以解决您的问题:)。编码愉快！

关于javascript - 动画html元素-flexslider，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18159144/