点击时使用JQuery动画改变div的宽度

Question

我不知道为什么这不起作用。

JQuery:

$("#foldit").click(function () {
    $("foldit").animate({"width": "165px"}, "fast");
});

- Shaul Bar-Lev

Answer 1

你没有在选择器中添加#，导致无法选中相应元素。

试着在点击事件内使用this引用来实现你想要的效果。

$("#foldit").click(function () {
    $(this).animate({"width": "165px"}, "fast");
});

根据您的新要求，您可以尝试以下方法：

按照您的新需求，您可以尝试以下操作：

$('#foldit').click( function() {
    var toggleWidth = $(this).width() == 165 ? "100px" : "165px";
    $(this).animate({ width: toggleWidth });
});

DEMO

- Rajaprabhu Aravindasamy

---

有没有办法让我第二次点击时它会恢复到原始宽度？ - Shaul Bar-Lev

@ShaulBar-Lev 请试用我的新更新。 - Rajaprabhu Aravindasamy

我理解这个概念，但在我的页面上它并没有真正起作用。 - Shaul Bar-Lev

我点击了一次但没有反应，第二次点击才运行。 - Shaul Bar-Lev

@ShaulBar-Lev 你能否做个演示呢？这样我们就可以轻松解决你的问题了。 :) - Rajaprabhu Aravindasamy

Answer 2

您在选择器中缺少 '#'，您也可以像这样使用它

$("#foldit").click(function () {
    $(this).animate({"width": "165px"}, "fast");
});

- Sachin

Answer 3

在代码中使用$(this)来替换$("foldit")

- user3064914