1

私はjqueryや、そのことに関するあらゆる種類のプログラミングにかなり慣れていません。

オブジェクトがクリックされたときに.hoverを上書きする方法はありますか？クリックしたときに画像をアニメーションの幅に保ち、ホバーしたときに元のサイズに戻らないようにしようとしています。

これが私がこれまでに持っているものです：

$(function() {
    $("#eggroll2, #eggrollL2").hover(function() {
        $(this).stop(true, true).animate({
            width: "300px"
        }, 250, "swing")
    }, function() {
        $(this).stop(false, false).animate({
            width: "150px"
        }, 250, "swing")
    });

    $("#middleRoll").hover(function() {
        $("#eggroll2, #eggrollL2").stop(true, true).animate({
            width: "250px"
        }, 250, "swing")
    }, function() {
        $("#eggroll2, #eggrollL2").stop(false, false).animate({
            width: "150px"
        }, 250, "swing")
    });
});​
4

2 に答える 2

1

クラスを追加して、クリックされたことを示し、縮小しないようにすることができます。

$(function() {
    $("#eggroll2, #eggrollL2").hover(function() {
        $(this).stop(true, true).animate({
            width: "300px"
        }, 250, "swing")
    }, function() {
        if (!$(this).hasClass('clicked')) {
            $(this).stop(false, false).animate({
                width: "150px"
            }, 250, "swing")
        }
    }).click(function() {
        $(this).addClass('clicked');
    });
});​

クリックで縮小/非縮小の状態を切り替えたい場合は、クリック ハンドラーでtoggleClass代わりに使用します。addClass

編集：（OPのコメントへの回答）

縮小/拡大する要素にクラスを追加します。それらが であると仮定すると、次<img/>のようにします。

<img class="images" ... >

上記のコードを次のように変更します。

$(function() {
    $(".images").hover(function() {
        $(this).stop(true, true).animate({
            width: "300px"
        }, 250, "swing")
    }, function() {
        if (!$(this).hasClass('clicked')) {
            $(this).stop(false, false).animate({
                width: "150px"
            }, 250, "swing")
        }
    }).click(function() {
        // remove "clicked" class from all images
        $(".images").removeClass("clicked");

        // add the class to this one only
        $(this).addClass('clicked');

        // mouseout is the 2nd parameter to 'hover' handler
        $(".images").trigger("mouseout");
    });
});​
于 2012-09-21T20:04:57.650 に答える
0

うーん...これを試してみますか？

$(function() {
    $("#eggroll2, #eggrollL2").click(function() {
        $(this).stop(true, true).animate({
            width: "300px"
        }, 250, "swing")
    });

    $("#middleRoll").click(function() {
        $("#eggroll2, #eggrollL2").stop(true, true).animate({
            width: "250px"
        }, 250, "swing")
    });
});​
于 2012-09-21T20:03:22.117 に答える