Question

嗨guyz我有一个mouseover事件和mouseout事件。这是正确的方式吗？还是有更好/更清洁的方式..

我做了一个这个

的演示

$(".containerslide").mouseover(function(){
    $(this).find(".slide").stop().animate({'margin-left': '0',}, 500)
});

    $(".containerslide").mouseout(function(){
    $(this).find(".slide").stop().animate({'margin-left': '-320px',}, 500)
});

Answer 1

您可以使用hover进/出处理程序：

DEMO jsFiddle

$(".containerslide").hover(function (e) {
    $(this).find(".slide").stop().animate({
        marginLeft: e.originalEvent.type === "mouseover" ? 0 : -320,
    }, 500)
});

或仅使用CSS：

DEMO jsFiddle CSS only

.slide {
    margin-left:-320px;
    position: absolute;
    background: yellow;
    width: 320px;
    height: 250px;
     -webkit-transition: margin-left .5s;
    transition: margin-left .5s;
}

.containerslide:hover .slide{
    margin-left:0;
    -webkit-transition: margin-left .5s;
    transition: margin-left .5s;
}

Answer 2

您可以改为使用 .hover() ：

将两个处理程序绑定到匹配的元素，以便在执行时执行鼠标指针进入并离开元素。

$(".containerslide").hover(function () {
    $(this).find(".slide").stop().animate({
        'margin-left': '0',
    }, 500)
}, function () {
    $(this).find(".slide").stop().animate({
        'margin-left': '-320px',
    }, 500);
});

<强> Updated Fiddle

切换鼠标事件？

2 个答案:

DEMO jsFiddle

DEMO jsFiddle CSS only