jquery - 可以将处理程序附加到滑动事件吗？

Question

是否可以监听特定元素上的滑动事件？

我希望这很容易：

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

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

找不到“slideDown”作为事件。

可以监听这样的事件吗？

Answer 1

为了做这种事情，我只是添加了更多的语义方法。因此，如果您有一个菜单，并且您想在向下滑动时触发一个事件，请执行以下操作，

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

然后只需调用menu.open()而不是menu.slideDown(). 当您构建其他相互交互的对象时，这种方法更具可读性和可维护性。然后，如果您选择稍后更改开始动画（例如，淡入或其他），则不必更新与之交互的所有内容。

Answer 2

在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>