0

我将所有内容都放入一个 html 文档中，以防万一它可能是导致问题的 css……我有 4 个使用 div 和 css 制作的绿色框。我希望它们在单击时变大——也许只是从 80x80px 到 100x100px 或类似的东西。现在那里的 jQuery 代码是我从别人的问题的答案中获取的代码——我对 jQuery 真的很陌生，并且遇到了很多麻烦。任何帮助，将不胜感激！！

<html>
<head>
<title>For testing</title>

<style type="text/css">
#green_box_container {
    float: left;
    padding: 0px;
    margin-left: 345px;
    height: 300px;
    width: 500px;
}

#green_box1 {
    background-color: #070;
    margin: 0px;
    padding: 0px;
    height: 80px;
    width: 80px;
    float: left;
    margin-left: 20px;
}

#green_box2 {
    background-color: #070;
    margin: 0px;
    padding: 0px;
    height: 80px;
    width: 80px;
    float: left;
    margin-left: 20px;
}

#green_box3 {
    background-color: #070;
    margin: 0px;
    padding: 0px;
    height: 80px;
    width: 80px;
    float: left;
    margin-left: 20px;
}

#green_box4 {
    background-color: #070;
    margin: 0px;
    padding: 0px;
    height: 80px;
    width: 80px;
    float: left;
    margin-left: 20px;
}
</style>

<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#green_box_container a").click(function() {
    var $this = $(this),
        val = $this.height() == 200 ? '50px' : '200px';
    $this.stop().animate({
        width: val,
        height: val
    }, "slow");
});
});
</script>

</head>

<body>

<div id="green_box_container">
<a href="#"><div id="green_box1"></div></a>
<a href="#"><div id="green_box2"></div></a>
<a href="#"><div id="green_box3"></div></a>
<a href="#"><div id="green_box4"></div></a>
</div>

</body>
</html>
4

2 回答 2

0

看起来您想要为（锚点）div内部设置动画。a为此，您可以简单地将动画功能应用于内部div，如下所示：

$(document).ready(function () {
    $("#green_box_container a").click(function () {
        var $this = $(this),
            val = $this.height() == 200 ? '50px' : '200px';
        $this.find("div").stop().animate({
            width: val,
            height: val
        }, "slow");
    });
});

这是一个演示这个想法的小提琴：http: //jsfiddle.net/bHyHS/

于 2013-03-19T07:43:59.737 回答
0

感谢您提供完整的示例。我在本地对此进行了测试，看来您的 jquery 选择器是您遇到问题的地方。

通过说给我 $("#green_box_container a")，您将使用 green_box_container 抓取所有锚标记。然后，您尝试调整锚点的大小，而不是使用锚点标签的实际 div。

要选择 green_box_container 内锚点内的所有 div，您只需向 jquery 选择器添加另一个级别，如下所示：

$("#green_box_container 一个 div")

希望这可以帮助。

于 2013-03-19T08:00:46.857 回答