Question

我对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")
    });
});

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

Answer 2

嗯......试试这个？

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

用.click动画覆盖.hover动画？

2 个答案: