0

実質的に同一の2つのアニメーションがあります...それらの違いは、「左と右」の配置です。コードの最初のブロックを .forward と .backward の両方に再利用したいと思います... HTML 5 の data- 属性またはおそらく変数を使用してこれを行うことができると思いますが、方法がわかりませんそれについて行きます。

  .hover-area { position:relative; width:100%; height:50px; }
  .backward, .forward { position:absolute; }
  .backward{ left:0px; }
  .forward { right:0px; }​


  <div class="hover-area">
      Hover Area
      <div class="backward" data-animate-on='{"left":"20"}' data-animate-off='{"left":"0"}'>Previous</div>
      <div class="forward" data-animate-on='{"right":"20"}' data-animate-off='{"right":"0"}'>Next</div>
  </div>


    $('.forward').css({opacity:0, right:0});
    $('.hover-area').hover(function() {
        $(this).find('.forward').stop()
            .animate({right:20}, {queue:false, duration:300, easing:'easeOutCubic'})
            .animate({opacity:'0.95'}, {queue:false, duration:400, easing:'easeOutCubic'});
    },function() {
        $(this).find('.forward').stop()
            .animate({right:0}, {queue:false, duration:550, easing:'easeOutSine'})
            .animate({opacity:'0'}, {queue:false, duration:300, easing:'easeOutSine'});
    });




    $('.backward').css({opacity:0, left:0});
    $('.hover-area').hover(function() {
        $(this).find('.backward').stop()
            .animate({left:20}, {queue:false, duration:300, easing:'easeOutCubic'})
            .animate({opacity:'0.95'}, {queue:false, duration:400, easing:'easeOutCubic'});
    },function() {
        $(this).find('.backward').stop()
            .animate({left:0}, {queue:false, duration:550, easing:'easeOutSine'})
            .animate({opacity:'0'}, {queue:false, duration:300, easing:'easeOutSine'});
    });
4

2 に答える 2

1

関数を使用し.data()てデータ属性を取得し、それらを で使用します.animate()

$('.backward,.forward').css({opacity:0, right:0});
    $('.hover-area').hover(function() {
        $(this).find('.backward,.forward').stop()
            .animate($(this).data("animate-on"), {queue:false, duration:300, easing:'easeOutCubic'})
            .animate({opacity:'0.95'}, {queue:false, duration:400, easing:'easeOutCubic'});
    },function() {
        $(this).find('.backward,.forward').stop()
            .animate($(this).data("animate-off"), {queue:false, duration:550, easing:'easeOutSine'})
            .animate({opacity:'0'}, {queue:false, duration:300, easing:'easeOutSine'});
    });

こちらがデモです。</p>

于 2012-09-01T02:57:20.213 に答える
1

これは、CSS3 変換アニメーションの良い候補のようです。すべてのデータ属性なしで単一のクラスforwardまたはを追加し、CSS を使用してアニメーション プロパティを指定します。backward

.goforward {
    left: 20px;
    transition-property: left;
    transition-duration: 3s;
}

次に、クラスを追加/削除してアニメーションを開始します。

$(".forward").addClass("goforward");

デモ: http://jsfiddle.net/EMUcV/1/

于 2012-09-01T02:59:15.960 に答える