Question

毫无疑问它有效，但我知道这不是一个好的代码。所以我想完成

使用一个on()

让它工作

<script>
    $(document).on("mouseenter", ".BUTTON_ONE", function() {
        $(this).animate({ 
            \'padding-right\' : 10,
        },30);
    });
    $(document).on("mouseleave", ".BUTTON_ONE", function() {
        $(this).animate({ 
            \'padding-right\' : 4,
        },30);
    });
    $(document).on("mouseenter", ".BUTTON_TWO", function() {
        $(this).animate({ 
            \'padding-left\' : 10,
        },30);
    });
    $(document).on("mouseleave", ".BUTTON_TWO", function() {
        $(this).animate({ 
            \'padding-left\' : 4,
        },30);
    });
    $(document).on("mouseenter", ".BUTTON_THREE", function() {
        $(this).animate({ 
            \'padding-left\' : 10,
        },30);
    });
    $(document).on("mouseleave", ".BUTTON_THREE", function() {
        $(this).animate({ 
            \'padding-left\' : 4,
        },30);
    });
 </script>

Answer 1

也许是这样的：:)

$(document).ready(function() {
    $(document.body)
    .on({
        'mouseenter': function(e) { animate_padding_right(e,10); },
        'mouseleave': function(e) { animate_padding_right(e,4); }
    }, ".BUTTON_ONE")
    .on({
        'mouseenter': function(e) { animate_padding_left(e,10); },
        'mouseleave': function(e) { animate_padding_left(e,4); }
    }, ".BUTTON_TWO,.BUTTON_THREE");
});
function animate_padding_left(e,val) {
    $(e.target).animate({'padding-left':val},30);
}
function animate_padding_right(e,val) {
    $(e.target).animate({'padding-right':val},30);
}

请注意，我使用的是$(document.body)，因为它速度更快。对这种情况更有效。

工作小提琴：http://www.codeply.com/go/uUoOo1vlaB

JQuery on with multiple events for mutiple elements

1 个答案: