CODEWITHSUNDEEP
jquery
Yazuri
Yazuri

Reputation: 3

Toggle mouse event?

Hi guyz i got a mouseover event and mouseout event. is this the right way ?, or is there a better/cleaner way..

i made a demo of this

http://jsfiddle.net/6Tfvb/

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

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

Upvotes: 0

Views: 262

Answers (2)

A. Wolff
A. Wolff

Reputation: 74420

You could use hover in/out handler:

DEMO jsFiddle

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

Or using only 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;
}

Upvotes: 1

Felix
Felix

Reputation: 38102

You can use .hover() instead:

Bind two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.

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

Updated Fiddle

Upvotes: 0

Related Questions