javascript - jQuery .stop() 不适用于动画

Question

我在一个网站上工作，我试图让悬停看一个样本：http: //jsfiddle.net/PBbSh/6/但你可以看到.stop()在这里不起作用。有人知道为什么吗？

Answer 1

尝试做.stop(true, true)。该文档将stop 指定为

.stop( [clearQueue ] [, jumpToEnd ] )

这样做.stop(true, true)将清除队列并将动画跳到最后。如果您只想清除动画队列，请执行.stop(true, false).

Answer 2

试试这个而不是停止，使用 .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);
    });
}

});

Answer 3

试试这个优化的代码：

$(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);
    }); 
});

Answer 4

试试这个（为了清楚起见，我已经清理了你的 HTML、CSS 和 jQuery）

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);
        });
    }
});

更新的小提琴：http: //jsfiddle.net/PBbSh/10/