ページの上部から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

2 答え

デモのjsfiddleがあります:

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

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

6
追加された
@ user1192721、いいえ、これを使用する前に、それを書き込むための自由な時間がありました。チッププラグインのいずれかの部分を書き換えずにその機能を追加することは可能だろうとは思っていません。上記のコードにはjQuery UIのエフェクトライブラリが必要です。私はおそらく、チッププラグインのパッチを書くことができますが、どちらのパッチですか?
追加された 著者 Kane Cohen,
うわー - それは骨にかかった!あなたはすでにこのようなものを使っていたのですか?あなたがTheZoo.comの[ thezoo.com/test/ を見て回ると、これは簡単にできると思いますか? Qtip、Cluetip、またはおそらく最も簡単なものと組み合わせることができます - 私がそこで使っている基本的なJqueryのツールチップですか?私はあなたのLOTR引用符が好きです - TolkienとC.S. Lewis rule ;-)
追加された 著者 Ban-Stoning,

最初の行をセレクタに置き換えるだけでは、コールバックを作成してツールチップの機能に渡しているため、機能しません。その代わりに、.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などのような)いくつかのデフォルトが組み込まれています。

お役に立てれば。

2
追加された
彼らは実際に非常に似ています。 jfiddle応答は、クリックされた領域に基づいて値を計算します。アニメーションが起こるコードの部分を見ると、基本的には同じです。上の値を事前計算しているだけです。
追加された 著者 Austen Holmes,
はい、それは完全にフォーマットを理解するのに役立ちます - ありがとう!それはJfiddleの返答とはかなり違っているようで、ツールチップのテクニックにもっと似ています。他のものよりも1つ有利ですか?
追加された 著者 Ban-Stoning,