CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
BackSlash
BackSlash

Reputation: 22233

mouseover animation weird behaviour

I'm creating a simple animation with jquery.

The animation consists on a div being slided left when the mouse hovers it.

This is my html:

<div class="item">
    <div class="content" onmouseover="over(this)" onmouseout="out(this)">
        <div class="image">
            <img src="http://aranciamato.it/wp-content/uploads/2013/09/insetti-700x250.jpg" width="300"/>
        </div>
        <div class="text">
            Some useful content
        </div>
    </div>
</div>

This is the js:

function over(element) {
    $(element).stop().animate({left: "-250"}, 500);
}

function out(element) {
    $(element).stop().animate({left: "0"}, 500);
}

This is the css:

.item {
    position: relative;
    width: 300px;
    height: 107px;
    overflow:hidden;
}

.item .content {
    position: absolute;
    top:0;
    left:0;
    width: 600px;
    height: 107px;
}

.item .content .image {
    position:absolute;
    top: 0;
    left: 0;
}
.item .content .text{
    position:absolute;
    top: 0;
    left: 300px;
    width: 250px
}

.item {
    border: 1px solid black;
}

The animation works properly, but I noticed that if you move the cursor over the left border of the .image div while the animation is running, it pauses for a moment and then resumes.

I don't know how to explain this better, so here you can find a JSFiddle, and here you can find a video that demonstrates the behaviour

My question is: Why is the animation behaving like this? How can I make the animation continue without pausing?

Upvotes: 1

Views: 164

Answers (4)

a better oliver
a better oliver

Reputation: 26828

When you move the cursor out of the image div then a mouseout event fires - you move out of the image - and the out function is called, making the animation stop. Right after that the mouseover event fires - you move over the text - and the over function is called.

You attached the event handlers to the content div, i.e. they are called whenever the event fires on itself, but also when the event fires on one of it's descendants.

The reason why it's working with mousenter and mouseleave is that those events are handled differently by the browser. But be aware that they are not supported by all browsers.

Upvotes: 0

vahidseo
vahidseo

Reputation: 461

Well, you can use your hover event on the parent element (in this case .item) and animate the child element (.content). If you're using jQuery, just use .hover () instead of those two mouse events.

Upvotes: 0

Arko Elsenaar
Arko Elsenaar

Reputation: 1729

Your jsfiddle is working for me. Also, its better for you to use the $(el).hover() function jQuery provides, for example:

$('.content').hover(function() {
    // Mouseover
}, function() {
    // Mouseout
});

Upvotes: 1

Anton
Anton

Reputation: 32581

Use mouseenter and mouseleave instead

<div class="content" onmouseenter="over(this)" onmouseleave="out(this)">

DEMO

Upvotes: 4

Related Questions