0

画像のホバーで割り当てに取り組んでいます。画像を回転させる必要があり、画像の回転が完了したら、別のオブジェクトをアニメーション化し、マウスアウトで最初の画像を元の位置に回転させてから、2番目のオブジェクトをアニメーション化する必要がありますそれは最初の位置であり、次に非表示になります。

すべてが完了しましたが、唯一の問題は、オブジェクトを表示するようにアニメーション化するときと、オブジェクトを非表示にするマウスアウト時です。

ここで動作するデモ。

使用するJavaScriptは

function rotate(degree,el,direction) {
          var interval = null,
          counter = 0;
          interval = setInterval(function(){
            if (direction == "anti_clockwise" ? counter >= degree : counter <= degree) {
              console.log(counter);
              el.css({
                MozTransform: 'rotate(-' + counter + 'deg)',
                WebkitTransform: 'rotate(' + counter + 'deg)',
                transform: 'rotate(' + counter + 'deg)'
              });
              if(direction == "anti_clockwise"){
                counter = counter - 1;
              }else if(direction == "clockwise"){
                counter = counter + 1;
              }
            }
            if (counter == degree && direction == "anti_clockwise") {
              clearInterval(interval);
              $("#prodShareIconDetails ul").animate({"left":"39px"},"slow");
            }
            if (counter == degree && direction == "clockwise") {
              clearInterval(interval);
              $("#prodShareIconDetails ul").animate({"left":"200px"},"slow", function(){

              });
            }
          }, 10);
      }
      $("#prodShareIcon").mouseover(function() {
        rotate(-39,$(this),"anti_clockwise");
      }).mouseout(function() {
        console.log(1);
        rotate(39,$(this),"clockwise");
      });

誰かが私が間違っている場所を理解するのを手伝ってくれますか?

最初は、idがprodShareIconDetails の要素を非表示にしてから、ホバー時に表示する必要があります。

4

2 に答える 2

0

固定デモはこちら

ラッパーの幅を 0 にして要素を右に移動する

#prodShareIconDetails{
width: 0px;
position: absolute;
top: -16px;
right: 10px;
z-index:10;
overflow:hidden;
}
于 2013-06-12T12:00:02.750 に答える
0

これは決して些細な問題ではありません。私の推測では、ホバー時にアイコンを回転させ、そのアニメーションが完了すると、バーが外側に伸び始めます。マウスが離れるたびに、プロセス全体が同じ順序で巻き戻されます。現在、アニメーションの初期または途中で終了すると非常にグリッチが発生し、完全に壊れた状態になることがあります。

私があなたなら、アニメーションを個別の機能に分けます。1) 回転 2) 延長、3) 回転解除、4) 収縮。次に、一方が完了すると他方が呼び出されるように、コールバックによってそれらをつなぎ合わせますが、CSS トランジションを使用すると、イベント ベースであるため少し難しくなります。jQuery トランジットプラグインは、それを簡単にするのに最適です。回転が完了すると、extend が呼び出されます。マウスアウトが発生すると、すべてのアニメーションが停止し、移動距離に応じて、収縮して巻き戻されます。

バーの表示に関しては、実際にはバーを表示する必要があります (ユーザーがバーが伸びているのを確認できるようにするため)。これを実現するには、バーを別の div 内に配置します。この div は、overflow: hidden; position: relative;. 次に、バーposition: absolute;が表示されないときに、「ウィンドウ」の表示スペースの外側に配置されるようにバーを配置します。この「ウィンドウ」と「トラック」の方法は、スライド アニメーションを行う場合によく使用されます。その一例がHuluです。「人気の番組」や、ページの真ん中にあるその他のスライダーをチェックしてください。

于 2013-06-12T08:52:50.127 に答える