ページの上部からdivを落として、クリックしたところでバウンスすることはできますか？

Question

ページの上部からdivを落として、クリックしたところでバウンスすることはできますか？

Here is my attempt so far http://thezoo.com/test/

http://tooltipsy.com/samples.html 彼の7番目の例では、「More Extreme - どのように空から落ちるか "ページの上部からdivを落とし、クリックしたボックスの上にバウンスさせます。

私は、基本的なjqueryとUIライブラリで作業するために、コードをツールヒントルーチンとは独立して動作させようとしています。彼の世界へのユニークな提供は、ページの上部から落ちる部分です。私はdivでいくつかのonclick関数を試してみましたか、リンクトリガーを使って1行目をこれに置き換えました： $（ 'mydiv'）。click（function（）{ これまで運がなかった。私は何が欠けていますか？ Qtip2やClueTipを使ってskyルーチンからの落下を使用したいと思います。

彼のやり方は次のとおりです。

$('.hastip').tooltipsy({
    offset: [-10, 0],
    show: function (e, $el) {
        $el.css({
            'left': parseInt($el[0].style.left.replace(/[a-z]/g, '')) - 50 + 'px',
            'opacity': '0.0',
            'display': 'block'
        }).animate({
            'left': parseInt($el[0].style.left.replace(/[a-z]/g, '')) + 50 + 'px',
            'opacity': '1.0'
        }, 300);
    },
    hide: function (e, $el) {
        $el.slideUp(100);
    }
});

助けてくれてありがとう。

0

追加された 06 2月 2012 〜で 04:31 著者 Ban-Stoning 編集された 06 2月 2012 〜で 06:05

ビュー: 3

源

ru fr es pt de ar

2 答え

デモのjsfiddleがあります：

http://jsfiddle.net/apHLu/4/

フェードアウトやその他のエフェクトはなく、上から跳ね返ります。それがどのように機能し、あなたのニーズに適応するかという一般的な考えを得ることを願っています。

6

追加された 06 2月 2012 〜で 05:26 著者 Kane Cohen

源

@ user1192721、いいえ、これを使用する前に、それを書き込むための自由な時間がありました。チッププラグインのいずれかの部分を書き換えずにその機能を追加することは可能だろうとは思っていません。上記のコードにはjQuery UIのエフェクトライブラリが必要です。私はおそらく、チッププラグインのパッチを書くことができますが、どちらのパッチですか？

追加された 06 2月 2012 〜で 08:08, 著者 Kane Cohen, 源

うわー - それは骨にかかった！あなたはすでにこのようなものを使っていたのですか？あなたがTheZoo.comの[ thezoo.com/test/ を見て回ると、これは簡単にできると思いますか？ Qtip、Cluetip、またはおそらく最も簡単なものと組み合わせることができます - 私がそこで使っている基本的なJqueryのツールチップですか？私はあなたのLOTR引用符が好きです - TolkienとC.S. Lewis rule ;-)

追加された 06 2月 2012 〜で 06:13, 著者 Ban-Stoning, 源

thezoo.com/test/bounce_1.htm 追加された 06 2月 2012 〜で 07:07, 著者 Ban-Stoning, 源

著者 Austen Holmes · Answer 1 · 2012-02-06T05:01Z

最初の行をセレクタに置き換えるだけでは、コールバックを作成してツールチップの機能に渡しているため、機能しません。その代わりに、.click（）関数で直接アニメーションを実行することができます。このようなもの：

$('mydiv').click(function(){ 
    $(this).css({
        'left': parseInt($el[0].style.left.replace(/[a-z]/g, '')) - 50 + 'px',
        'opacity': '0.0',
        'display': 'block'
    }).animate({
        'left': parseInt($el[0].style.left.replace(/[a-z]/g, '')) + 50 + 'px',
        'opacity': '1.0'
    }, 300);
}

私はどこでもテストしていないので、うまくいかないかもしれませんが、正しい方向に向けるべきです。また彼の "弾力性"は、 "easeOutBounce"プロパティから来ていることに注意してください。これは、開始および終了パラメータに基づいてdivの位置を補間しようとするアニメーションフレームワークに指示します。通常は、（easeIn、easeOutなどのような）いくつかのデフォルトが組み込まれています。

お役に立てれば。