Question

是否可以在特定元素上侦听滑动事件？

我希望这很简单：

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

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

无法找到“slideDown”作为event。

是否可以收听此类活动？

Answer 1

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

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

然后只需拨打menu.open()而不是menu.slideDown()。在构建彼此交互的其他对象时，此方法更具可读性和可维护性。然后，如果您选择稍后更改您的初始动画（例如，更改为fadeIn或其他内容），则无需更新与其交互的所有内容。

Answer 2

在Ben on method overriding的帮助下，我能够在你可以绑定的函数调用上添加一个触发器：

$(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>

可以将处理程序附加到slidedown事件？

2 个答案: