0

私はサイトに取り組んでおり、ホバーのようなサンプルを表示しようとしています: http://jsfiddle.net/PBbSh/6/しかし、ご覧のとおり、.stop()ここでは機能しません。誰かが理由を知っていますか？

4

4 に答える 4

2

.stop(true, true)代わりにやってみてください。ドキュメントでは、stop を次のように指定しています。

.stop( [clearQueue ] [, jumpToEnd ] )

実行すると、キュー.stop(true, true)がクリアされ、アニメーションが最後までジャンプします。アニメーション キューをクリアするだけの場合は、 を実行します.stop(true, false)。

于 2013-02-18T14:48:37.293 に答える
0

停止する代わりにこれを試してください。.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);
    });
}

});
于 2013-02-18T14:50:27.417 に答える
0

この最適化されたコードを試してください：

$(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);
    }); 
});
于 2013-02-18T14:50:35.820 に答える
0

これを試してください (わかりやすくするために、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/

于 2013-02-18T15:41:43.790 に答える