CODEWITHSUNDEEP
javascriptjqueryjquery-events
Ajeo
Ajeo

Reputation: 73

jQuery .stop() with animation

I'm working on a site and I'm trying to make sort of hover see a sample: http://jsfiddle.net/PBbSh/6/ but as you can see does .stop() not work here. Does somebody know why?

Upvotes: 0

Views: 264

Answers (4)

darshanags
darshanags

Reputation: 2519

Try this (I've cleaned up your HTML, CSS and jQuery a bit for clarity)

HTML:

<div id="fotowrapper">
        <div id="fotocontainer">

            <div class="projectenfoto1">
            </div>

        </div>
</div>

CSS:

#fotowrapper {
    margin-top: 11px;
}

#fotocontainer {
    width: 747px;
    height: 523px;
    margin-left: auto;
    margin-right: auto;
    position:relative;
}

.projectenfoto1 {
    width: 186.75px;
    height: 378px;
    background-image: url(http://www.crewtime.nl/kookenleer/Images/Slideshow/foto3.png);
    background-repeat: no-repeat;
    float:left;
    z-index: 4;
    position: absolute;
}

jQuery:

$(document).ready(function(){
    projectenfunction(".projectenfoto1");

    function projectenfunction(foto1){

        $(foto1).mouseover (function(){
            $(foto1).stop().animate({
                width: "278"
            }, 500);
        });

        $(foto1).stop().mouseout(function(){
            $(foto1).stop().animate({
                width: "186.75"
            }, 500);
        });
    }
});

updated fiddle: http://jsfiddle.net/PBbSh/10/

Upvotes: 0

silly
silly

Reputation: 7887

try this optimized code:

$(document).ready(function(){

    $(".projectenfoto1, .projectenfoto2, .projectenfoto3")
    .mouseover(function(){
        jQuery(this).stop().animate({
                width: "278",
                }, 500);
    })
    .mouseout(function(){
        jQuery(this).stop().animate({
            width: "186.75",
        }, 500);
    }); 
});

Upvotes: 0

Moussa Harajli
Moussa Harajli

Reputation: 1516

Try this instead of stop, use .clearQueue()

$(document).ready(function(){

$(".projectenfoto1").stop().mouseover( projectenfunction(".projectenfoto1"));
$(".projectenfoto2").stop().mouseover( projectenfunction(".projectenfoto2"));
$(".projectenfoto3").stop().mouseover( projectenfunction(".projectenfoto3"));

function projectenfunction(foto1){
    $(foto1).stop().mouseover (function(){
        $(foto1).animate({
            width: "278",
            }, 500);
        });

    $(foto1).clearQueue.mouseout(function(){
        $(foto1).animate({
        width: "186.75",
    }, 500);
    });
}

});

Upvotes: 0

Bojangles
Bojangles

Reputation: 101473

Try doing .stop(true, true) instead. The documentation specifies stop as being

.stop( [clearQueue ] [, jumpToEnd ] )

Doing .stop(true, true) will clear the queue and jump the animation to the end. If you just want to clear the animation queue, do .stop(true, false).

Upvotes: 2

Related Questions