0

我可以在 jquery 中为 div 元素设置动画。在我的代码中仅用于静态。如何动态使用。

<!DOCTYPE HTML>
<html><head>
<script src="js/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $(".chk1").click(function(){
            $("#box").animate({height:"100px"});
            $("#box1").animate({height:"50px"}); 
        });
        $(".chk2").click(function(){
            $("#box1").animate({height:"100px"});
            $("#box").animate({height:"50px"});  
        });
    });
</script>
</head>
<body>
<div id="box" class="chk1" style="background: none repeat scroll 0% 0% rgb(152, 191, 33); height: 50px; width: 200px; margin: 6px;">
</div>
<div id="box1" class="chk2" style="background: none repeat scroll 0% 0% red; height: 50px; width: 200px; margin: 6px;">
</div>
</body></html>

有两个div。如果单击第一个，则它会变大，而其余的会变小。所有 div 都遵循该模式。如果我需要再添加一个 div，目前我复制 jquery 代码。我们如何动态添加 div。你能帮我吗？

谢谢，迪内什

4

1 回答 1

0

通过给两个div元素一个类（expander在我的示例中），您可以使其更加动态，而不必重复相同的代码两次：

$('.expander').click(function(){
   $('.expander').not(this).animate({height:"50px"});
    $(this).animate({height:"100px"})
});

现场示例：http: //jsfiddle.net/RVCYz/

同样也可以通过以下方式实现siblings()：

$('.expander').click(function(){
    $(this).animate({height:"100px"})
       .siblings()
       .animate({height:"50px"});
});

现场示例：http: //jsfiddle.net/RVCYz/2/

无论您添加多少个 div，这都可以正常工作：http: //jsfiddle.net/RVCYz/4/

于 2012-09-06T11:44:27.183 回答