0

これが私のこれまでの試みですhttp://thezoo.com/test/

http://tooltipsy.com/samples.htmlで、「もっと極端-空から落ちるのはどうですか」というラベルの付いたページの下の7番目の例では、divがページの上部から落ち、クリックされたボックスの上で跳ね返ります。

私は彼のコードを彼のツールチップルーチンとは独立して機能させ、基本的なjqueryとUIライブラリを単純に機能させようとしています。彼のユニークな世界への提供は、ページの上部からの落下です。divでいくつかのonclick関数を試したか、リンクトリガーを使用して、彼の1行目を次のように置き換えました：$（'mydiv'）。click（function（）{しかし、これまでのところ運がありません。 Qtip2またはClueTipで空からの落下ルーチンを使用するのが好きです。

これが彼のやり方です：

$('.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);
    }
});

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

4

2 に答える 2

6

動作するデモを含むjsfiddleは次のとおりです。

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

フェードアウトやその他の効果はなく、上から跳ね返るだけです。それがどのように機能し、ニーズに適応するかについての一般的なアイデアを理解していただければ幸いです。

于 2012-02-06T17:26:22.443 に答える
2

彼はコールバックを作成してツールティプシー関数に渡しているため、最初の行をセレクターに置き換えるだけでは機能しません。代わりに、.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など）。

お役に立てれば。

于 2012-02-06T17:01:19.360 に答える