3

特定の要素でスライドダウン イベントをリッスンすることはできますか?

私はそれが次のように簡単になることを望んでいました：

 $("#element").slideDown();

 $('#element').bind('slideDown', function() {  
    alert('Slidedown event fired');  
 });

イベントとして「slideDown」が見つかりませんでした。

そのようなイベントをリッスンすることは可能ですか?

4

2 に答える 2

3

この種のことを行うために、私はさらにセマンティックメソッドを追加します。したがって、メニューがあり、それを下にスライドしたときにイベントをトリガーしたい場合は、代わりに次のようにします。

var menu = $('#menu');
menu.open = function() {
  menu.slideDown();
  menu.trigger('menuOpened');
};

次に、menu.open()の代わりに呼び出しますmenu.slideDown()。このアプローチは、相互作用する他のオブジェクトを作成するときに、より読みやすく、保守しやすくなります。その後、オープニングアニメーションを後で変更することを選択した場合（たとえば、fadeInなど）、それと相互作用するすべてを更新する必要はありません。

于 2011-06-08T22:04:55.467 に答える
1

メソッドのオーバーライドに関する Benの助けを借りて、バインドできる関数呼び出しにトリガーを追加することができました。

$(function(){
    ;(function($){
        var orig_slideDown = $.fn.slideDown;

        $.fn.slideDown = function(){
            $(this).trigger('slideDown');
            orig_slideDown.apply(this, arguments);
        };
    })(jQuery);

    $('.up').click(function(){
        $('div').slideUp();
    });
    $('.down').click(function(){
        $('div').slideDown();
    });
    $('div').bind('slideDown',function(){
        $('div').append($('<p>').text('Down Triggered'));
    });
});

<a href="#" class="up">Up</a> <a href="#" class="down">Down</a>
<div style="width:300px;height:200px;background-color:red;color:white;">
    <p>Hello, world!</p>
</div>
于 2011-01-21T07:09:21.733 に答える