Question

如何在幻灯片动画后为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'});

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/

现在我已经使用淡入淡出的可能性更新了小提琴。

以下是对代码所做的更改，这里是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>

<强>的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');

  }
 });

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

动画html元素 - flexslider

1 个答案: