Geek asks and answers

JQuery mouseover works from mouse

Here is my jQuery

$('#samsungShine').mouseover(function () {
    $('#samsungShineImage').animate({
        "margin-left": "304px"
    }, 700);
}).mouseout(function () {
    $('#samsungShineImage').css("margin-left", "-304px");
});

When I hover over the mouse, it works fine, when I click, it does not reset, it reproduces the hint ... here is the scenario of the problem, so you can see what I mean:

http://jsfiddle.net/2tujd/

+5
source share
3 answers

Try this using stoptoo:

Demo

$('#samsungShine').mouseenter(function() {
    $('#samsungShineImage').animate({"margin-left":"304px"}, 700);
}).mouseleave(function(){
    $('#samsungShineImage').stop().css("margin-left", "-304px");
});
+4
source

Try mouseenterand mouseleaveinstead: http://jsfiddle.net/2tujd/11/

$('#samsungShine').mouseenter(function () {
    $('#samsungShineImage').animate({
        "margin-left": "304px"
    }, 700);
}).mouseleave(function () {
    $('#samsungShineImage').stop().css("margin-left", "-304px");
});

The jQuery site talks about usage mouseoutand simlyarly for mouseover:

- . , Inner , mouseout , Outer. mouseout .

: .stop() mouseleave, ​​ margin-left.

+8

http://jsfiddle.net/2tujd/10/

I think it is better to use only one handler. This way you have no bubbles or problems with asynchronous methods.

$('#samsungShine').mouseenter(function () {
    $('#samsungShineImage').animate({
        "margin-left": "304px"
    }, 700, function() {
  $('#samsungShineImage').css("margin-left", "-304px")
  });
});
-1
source

More articles:


All Articles