Jquery 覆盖。用鼠标悬停动画。单击动画？

我对jquery和任何类型的编程都是相当陌生的

是否有方法覆盖。单击对象时悬停？我试图让图像在单击时保持动画宽度，而不是在悬停时恢复到原始大小

以下是我到目前为止的情况：

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

嗯。。。试试这个

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

嗯。。。试试这个

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

---

您可以添加一个类来指示它已被单击，而不是将其缩小：

$(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 class="images" ... >

---

您可以添加一个类来指示它已被单击，而不是将其缩小：

$(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 class="images" ... >

---

太直截了当了。依我看，OP要求切换。但没有任何关于缩小它的问题。好。。。这就是为什么答案（如何开始）太直截了当了。依我看，OP要求切换。但没有任何关于缩小它的问题。好。。。这就是为什么答案开始的原因（它是如何开始的）以及如果他们在点击它之后再上下悬停怎么办？如果他们在点击它之后再上下悬停怎么办？谢谢，我希望我知道这是如何工作的，但它做到了！有没有办法使其他对象恢复到其原始大小？假设我单击左对象，然后单击中间的对象，我希望左对象缩小到其原始大小。它的工作方式是向单击的元素添加一个类，将其标记为“clicked”。当mouseout发生时，将检查该类。收缩动画是在没有课的时候开始的。谢谢，我希望我知道它是如何工作的，但它做到了！有没有办法使其他对象恢复到其原始大小？假设我单击左对象，然后单击中间的对象，我希望左对象缩小到其原始大小。它的工作方式是向单击的元素添加一个类，将其标记为“clicked”。当mouseout发生时，将检查该类。没有类时，将启动收缩动画。