0

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

この初心者にアドバイスしてください...ありがとう！

      .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">Previous</div>
          <div class="forward">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

最も簡単な（そして最も用途の広い）方法は、HTML5データ属性を使用してアニメーションの開始/停止状態をJSONデータとして保存することです。例：

http://jsfiddle.net/ChrisPebble/LFsVr/

HTML

<div class="hover-area" data-animate-on='{"right":"20"}' data-animate-off='{"right":"0"}'>hover over me
    <div class="slider">I move to the right</div>
</div>

<div class="hover-area" data-animate-on='{"left":"20"}' data-animate-off='{"left":"0"}'>hover over me
    <div class="slider">I move to the left</div>
</div>

jQuery

$('.slider').css({opacity:0, right:0});
$('.hover-area').hover(function() {
    var animationOn = jQuery.parseJSON(($(this).attr("data-animate-on")));
    $(this).find('.slider').stop()
        .animate(animationOn, {queue:false, duration:300, easing:'easeOutCubic'})
        .animate({opacity:'0.95'}, {queue:false, duration:400, easing:'easeOutCubic'});
},function() {
    var animationOff = jQuery.parseJSON(($(this).attr("data-animate-off")));
    $(this).find('.slider').stop()
        .animate(animationOff, {queue:false, duration:550, easing:'easeOutSine'})
        .animate({opacity:'0'}, {queue:false, duration:300, easing:'easeOutSine'});
});
于 2012-05-26T20:10:32.440 に答える
0

htmlの構造がどうあるべきか、何が起こるべきかよくわかりませんでしたが、これは（変数の観点から）あなたが意味するようなものですか？

var option = 'right'; // or option = 'left'
var classDirection = ".forward"; // or ".backward";
move(option, classDirection, 20);
function move(option, classDirection, changeDir}{
   var css = {opacity:0};

   var obj = {};
   obj[option] = 0;
   $.extend(css, obj); 

   var obj2 = {};
   obj2[option] = chaneDir;

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

それが役に立ったら、私はjsfiddleで何かを始めました。データ属性の使用に関しては（本当に必要な場合）、$（'。forward）.attr（' data-dir'）;を使用してそれらにアクセスできると思います。とか何か。

http://jsfiddle.net/zBsXX/1/

于 2012-05-26T19:50:45.513 に答える