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 回答