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>

2つの部門があります。最初の 1 つをクリックすると、それが大きくなり、残りの 1 つが小さくなります。すべてのdivでパターンが続きました。もう 1 つ div を追加する必要がある場合は、現時点では jquery コードをコピーします。div を動的に追加するにはどうすればよいですか。手伝ってくれますか？

ありがとう、ディネシュ

4

1 に答える 1

0

両方のdiv要素に単一のクラスを与えることexpanderで（私の例では）、これをより動的にすることができ、同じコードを2回繰り返す必要はありません。

$('.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 に答える