神経質jQueryのアニメーション

Question

HTML

<div class="phone"> 
    <a href="#" > 
    <img src="/assets/phonenew.png" alt="" height="90px" width="90px" /> 
    </a> 
</div> 

<div class="phone-number"> 
    <a href="#"> 
    <img src="/assets/phonenumber.png" class="phone-full" height="45px" /> 
    </a> 
</div> 

CSS

.phone { 
position: absolute; 
top: 200px; 
left: 915px; 
cursor: pointer; 
z-index: 100; 
} 

.phone-number { 
    position: absolute; 
    top: 225px; 
    left: 908px; 
    display: none; 
    cursor: pointer; 
    font-family: 'Open Sans'; 
    font-size: 28px; 
    color: rgb(68, 69, 67); 
} 

これは私が自分の携帯電話のアイコンドットフォン番号をさらすのMouseEnterに残された（phonenew.png）スライドを作るために使用しているjQueryのです次にマウスの左に戻り、phone-numberを隠します。このアニメーションは非常にやわらかいです。私はキューイングのようなステップがないと思っています。

$.fn.animateRotate = function(angle,prevAngle, duration, easing, complete) { 
    var args = $.speed(duration, easing, complete); 
    var step = args.step; 
    return this.each(function(i, e) { 
     args.complete = $.proxy(args.complete, e); 
     args.step = function(now) { 
      $.style(e, 'transform', 'rotate(' + now + 'deg)'); 
      if (step) return step.apply(e, arguments); 
     }; 

     $({deg: prevAngle}).animate({deg: angle}, args); 
    }); 
}; 
var angle = 0; 
var prevAngle = 0; 

$(".phone").mouseenter(function(e) { 
    prevAngle = angle 
    angle -= 100; 
    $(this).animateRotate(angle, prevAngle, 250); 
    e.preventDefault(); 
    $(this).animate({ 
    left: "800px", 
    opacity: 1 
    }, { 
    duration: 300, 
    queue: false 
    }); 
    $(".phone-number").fadeIn(1000); 
    // $(".phone-number").show("slide", 400); 
}); 
$(".phone").mouseleave(function(e) { 
prevAngle = angle 
angle += 100; 
$(this).animateRotate(angle, prevAngle, 350); 
e.preventDefault(); 
$(this).animate({ 
    left: "905px", 
    opacity: 1 
    }, { 
    duration: 300, 
    queue: false 
    }); 
    $(".phone-number").hide("slide", "easeInQuart", 300); 
}); 

Answer 1

そうです私は、ChromeブラウザとそのDev Toolsの使用を開始することを強くお勧めします。あなたのコードからJSFiddleを作成しました。その完璧ではない、私はいくつかを変えなければならなかった。注：jQuery 2.2.3を使用しています。使用しているバージョンは何ですか？ここ

その：https://jsfiddle.net/ubv51rdk/9/

私はすぐ繰り返しエラーが表示さアニメーションを開始：「スイング」に緩和引数のデフォルトは、https://api.jquery.com/jQuery.speed/による

Uncaught TypeError: n.easing[this.easing] is not a function

をしかし、あなただけです「イージング」という言葉を使用すると、そこに何か他のものを置く必要があります...たくさんの選択肢があります。チェックアウトhttps://api.jqueryui.com/easings/

私はあなたがコーディングしているときには、いつでも新しいことを学び、試してみたいと考えています。あまりにも伸びすぎることに注意してください。あなたのプログラムのコードのそれぞれが何をしているかを常に理解するよう努力すべきです。 （私たちの多くが壊れています...）Chrome DevToolsを使用してJavaScriptがどのように動作するのかを理解したことのない人にとって、このプログラムは非常に大きなものです。ほとんどあまりにも。 animateRotate関数は、その複雑な形のargsオブジェクトでは、これを分かりやすくしません。ファンクションコールへの入力が使用されていないという事実（とcomplete）と、まったく混乱している問題args.complete = $.proxy(args.complete, e);とそれに続くstepの機能は、私の髪を引っ張ってくれます。

元のコードを元の形式で見ることなく、これはイライラさせる以上のものです。あなたはリファレンスがありますか？これはフォーチュンの例のホイールですか？

私はコードをステップアップしようとしています。明らかにJSのフィドルがそのフォーマットを大幅に変更しました。私は、変数に腕時計を置き、JSのフィドルでコードをステップすることが可能なのか見ていない。オーバーヘッドが多すぎます。私はそれがローカルホスト上の簡単なウェブサイトかどこかでウェブ上でホストされていなければならないと思う。それを行い、コードをステップ実行すれば、argsオブジェクトを見たいでしょう。 completeの仕組みや、私のswing入力がまだエラーを生成している理由について私には明らかではありません。

私は自分の答えを削除する準備ができています。運が良ければいいと思います。