javascript - 动画 html 元素 - flexslider

Question

如何在幻灯片动画后为 flexslider 的每张幻灯片上的 html 元素设置动画。在互联网上搜索了几个小时。找不到任何教程或可以提供帮助的东西。有人可以告诉我和如何做到这一点的例子。链接到 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'});

Answer 1

您可以通过使用 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/

现在我已经使用淡入可能的解决方案更新了小提琴。

以下是对代码所做的更改，这是更新的小提琴链接

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>

Javascript

  $("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');

  }
 });

我希望这已经解决了你的问题:)。快乐编码！