Question

我正在网站上工作，我正试图进行一些悬停看到示例：http://jsfiddle.net/PBbSh/6/但正如您所看到的那样，.stop()无效。有人知道为什么吗？

Answer 1

尝试改为.stop(true, true)。 The documentation指定停止为

.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/

jQuery .stop（）不适用于动画

4 个答案: