Question

我正在研究我认为简单的代码块，尝试动态（使用'this'）动画div块在点击时缩放（缩放）到父容器（section标签）的大小。

我的HTML：

    <section>

    <div id="project"></div><div id="project"></div><div id="project"></div>

    <div id="project"></div><div id="project"></div><div id="project"></div>

</section>

我的JavaScript：

    $("#project").click(function() {
        $(this).animate({
            opacity: 0.75,
            width: 100%,
            height: 100%
        }, 5000, function() {
    });
});

Jquery和Jquery UI都是从Google库中正确链接的（所以我的控制台也是这样），我的控制台也告诉我语法错误带有意外的“，”但是我从JqueryUI.com直接采用这种语法。任何帮助表示赞赏！

此外，我希望能够动态选择除当前点击的div之外的所有其他div并从DOM中删除它们（使用display：none），这样它看起来更干净，但我不知道怎么去在我的代码中“选择”它们......

谢谢大家！：）

Answer 1

你缺少大约100％的报价，所以你的代码就像这样

$("#project").click(function() {
        $(this).animate({
            opacity: 0.75,
            width: "100%",
            height: "100%"
        }, 5000, function() {
    });

请使用唯一ID

编辑：对于使用类，您可以使用类似的东西

$(".project").click(function() {
            $(".project").css({'display':'none'});
            $(this).css({'display':'block'});
            $(this).animate({
                opacity: 0.75,
                width: "100%",
                height: "100%"
            }, 5000, function() {

        });

Answer 2

我希望能够动态选择除当前点击的div之外的所有其他div并将其从DOM中删除（使用display：none），这样它看起来更干净，但我不知道怎样去选择'他们在我的代码中......

var $project = $(".project");
$project.click(function() {
  var thisDiv = this;
  $project.each(function(index, elem) {
    if (elem!==thisDiv) $(elem).css('display', 'none');
  });
  $(thisDiv).animate({
    opacity: 0.75,
    width: "100%",
    height: "100%"
  }, 5000, function() {});
});

使用JQuery动画和“this”选择器

2 个答案: