-1

他の 1 つの div 内のいくつかの div 要素:

<div id="divs1">
     <div class = "type1">1</div>
     <div class = "type1">2</div>
     ...
</div>

他の要素をクリックすると、各要素の幅と高さが 10 ピクセルずつ増加します。

$divs1 = $('#divs1').children()
$('#increaseThem').click(function(){
    $divs1.animate({
        top: ?????.css('top') + 10 +'px',
    },
    {duration:'normal',
    queue: false,
    })
})

プロパティでアニメーション要素の属性を取得するには? 代わりに何をすべきか (?????) ? ps。アニメーション要素ごとに幅と高さが異なります

4

6 に答える 6

1

eachを使用して要素をループすることをお勧めします。

Javascript (jQuery)

$bars = $('#myDiagram .bar');

$('#increase').click(function() {
    $bars.each(function(){
        $this = $(this);

        $this.animate({
            width: $this.width() + 10 + 'px',
        },
        {
            duration:'normal',
            queue: false
        });
    });
});

HTML

<div id="myDiagram" class="diagram">
  <div class="bar" style="width: 10px"></div>
  <div class="bar" style="width: 30px"></div>
  <div class="bar" style="width: 20px"></div>
</div>
<button id="increase">Increase bars</button>

デモを見る。

于 2013-03-04T09:29:15.590 に答える
1

ここにあなたが探していると思うものがあります：

$('#click').click(function(){
    $('.type1').animate({
        height: '+=10px',
        width: '+=10px'
    }, {
        duration:'normal',
        queue: false,
    });
});

jsフィドル

于 2013-03-04T09:12:12.007 に答える
0

width()jqueryのheight()関数を使用する必要があります。次のコードを使用して、他の子の幅を変更できます。

$('.type1').click(function(){
    $(this).siblings().animate({width: ($(this).siblings().width()+10)+'px',height:($(this).siblings().width()+10)+'px',background:"red"},
    {duration:'normal',queue: false}) 
});

アニメーション 付きhttp://jsfiddle.net/arjuncc/WzfXp/5/

アニメーションなし http://jsfiddle.net/arjuncc/WzfXp/4/

于 2013-03-04T09:01:19.283 に答える
0

はい、別のセレクターで試すこともできますが、利用可能な機能を見逃してはなりません。$(this)

top: $(this).css('top') + 10 +'px',

于 2013-03-04T09:02:44.837 に答える
0

id:increaseThem を持つボタンがあると仮定すると、最初に各子要素の現在の高さと幅を見つけてから、それらを繰り返し処理して、それぞれの高さと幅を 10px ずつ増やすことができます。

$('#increaseThem').click(function(){
$('#divs1').children().each(function () {
var height=$(this).height()+10;
var width=$(this).width()+10;
$(this).animate(
{"height": height+"px"},
"fast");
$(this).animate(
{"width": width+"px"},
"fast");
});
});
于 2013-03-05T15:53:11.380 に答える
0

$('.type1')はこのクラスのコレクションであり、you are animating the elements from its current location.クラス名を持つ各 div.type1はmove to 10 px from top.

$('.type1').each(function(){
   $this = $(this);
  $('#increaseThem').click(function(){
     $this.animate({
        top: $this.css('top') + 10 +'px',
     },
      {duration:'normal',
       queue: false,
     });
});
于 2013-03-04T08:57:40.853 に答える