Question

另一个div中的一些div元素：

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

通过点击其他元素，每个元素的宽度和高度应增加10px。

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

如何在属性中获取动画元素的一些属性？应该是什么（?????）？ PS。每个动画元素都有不同的宽度和高度

Answer 1

以下是我认为您正在寻找的内容：

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

jsFiddle

Answer 2

我建议您使用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>

查看demo。

Answer 3

$('.type1')是此类的集合，you are animating the elements from its current location.因此，每个具有类名.type1的div将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,
     });
});

Answer 4

你必须使用jquery的width()，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/

Answer 5

是的，您也可以尝试使用其他选择器，但不应错过$(this)

的可用设施

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

Answer 6

假设您有一个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");
});
});

Jquery动画增加了儿童attr

6 个答案:

jsFiddle