2

私はウェブサイトhttp://www.wpnukes.com/demo/html/welcare/と同じ効果を達成しようとしていました

サインイン リンクの横にある画面の右上にある連絡先リンクに注意してください。連絡先の div ドロップ ダウンをクリックすると、ジャークが表示されます。この効果を達成するにはどうすればよいか、この効果の名前を教えてください。グーグルでコードを見つけることができます。お願いします、ありがとう。

4

3 に答える 3

7

このタイプのエフェクトには jQuery UI を使用する必要があります。彼らが行ったのは、ボタンとdisplay:noneに接触するための絶対位置を持つdivだけです。連絡先ボタンのクエリが効果をトリガーします。jquery Core plus UI ファイルを html に追加する必要があることを忘れないでください。

解決策 1 - バウンス効果 - ライブデモ

$(document).ready(function(){
    $("button" ).click(function() {
         $( ".toggle" ).toggle( "bounce", { times: 3 }, "slow" );
    });
});

解決策 2 - EASEOUTBOUNCE 効果 - ライブデモ

$(document).ready(function(){
   $("button").click(function () {
      $('.login').toggle('slide', {
         duration: 1000,
         easing: 'easeOutBounce',
         direction: 'up'
      });
   });
});
于 2013-08-11T14:15:56.847 に答える
0

それはカスタム jquery アニメーションです。

$("#link").click(function(e) {          
        e.preventDefault();
        $('#divToAnimate').animate({height: 'show', opacity: '0', filter: 'alpha(opacity=0)'}, {duration: 0}).animate({opacity: '.5', filter: 'alpha(opacity=50)', top: 58}, {duration: 300, easing: 'easeInBack'}).animate({opacity: '1', filter: 'alpha(opacity=100)', top: 24}, {duration: 200, easing: 'easeOutBack'});
    });
于 2013-08-11T14:25:00.637 に答える
0

jQueryUIを見てください。いくつかのアニメーション バウンス効果があります。

于 2013-08-11T14:15:45.800 に答える