0

スライドのアニメーションの後に、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'});
4

1 に答える 1

4

これは、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');

  }
 });

これで問題が解決したことを願っています:)。ハッピーコーディング！

于 2013-08-10T11:06:31.260 に答える