-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,
    })
})

如何在属性中获得一些动画元素的属性？应该是什么 (?????) ？附言。每个动画元素都有不同的宽度和高度

4

6 回答 6

1

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

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

jsFiddle

于 2013-03-04T09:12:12.007 回答
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 回答
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 回答
0

您必须使用 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/

于 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 回答