Javascript 为什么div在这两种情况下有不同的动画

我有两个与动画，都做相同的，但不同的动画div。我有

$(document).ready( function(){
  $('#show_hide_button').click( function() {
    $('#some_box').animate({ width: 'toggle' });
  });
});

JSFIDLE中的完整代码

有人能给我解释一下为什么第一个div总是从右到左，从左到右，第二个div总是从左上角

---

如何使第二个div的动画效果与第一个div相同？

首先，您的问题中应该包含代码中的相关细节（除了提供小提琴之外）。但是您有以下CSS：

#some_box {
  background: #fc0;
  width: 25%;
  height: 200px;
}

.second img {  
  max-width:100%;
  max-height:100%;
}

.second {   
  width: 200px;
}

使用以下HTML：

<button id="show_hide_button">click me</button>
<div id="some_box"></div>

<div class="second">   
    <img src="http://piq.codeus.net/static/media/userpics/piq_66223.png" />; 
</div>

您还可以将这两个动画放在一个单击事件处理程序中，如下所示：

$(document).ready( function(){
  $('#show_hide_button').click( function() {
    $('#some_box').animate({ width: 'toggle'});
    $('.second').animate({ width: 'toggle' });
  });
});

叉开你的小提琴：

更新2

从评论来看，您似乎希望图像向左折叠，而不丢失纵横比。我们需要有点创意来实现这一点，特别是如果您正在寻找涉及

jQuery.animate（）

的解决方案。图像在缩小时实际上需要向下移动。我们可以通过设置

本身（而不是其容器）的动画，并在调整其上边距的同时设置其宽度的动画来实现这一点

修订CSS（使容器大小一致）：

修订JS：

$(document).ready( function(){
  $('#show_hide_button').click( function() {
    $('#some_box').animate({ width: 'toggle' });

    var $secondImg = $('.second img'),
        secondImgMargin = $secondImg.is(':visible') ? '50%' : 0;

    $('.second img').animate({
      width: 'toggle',
      marginTop: secondImgMargin
    });
  });
});

请注意，我们需要首先确定

是否可见。如果是，那么我们希望将顶部边距设置为50%。如果不是，则将上边距切换回0

这是一把新的叉形小提琴：

最后一个音符

---

所有这些都可能更容易通过CSS3转换实现。您可能希望设置一个用于切换动画的类。在这种情况下，您可以指定“左中心”。

问题是，您在第二个div的内部添加了相对宽度和高度属性，而没有为第二个div指定高度和宽度属性。这样，图像控制第二个div的高度和宽度，因为它没有高度和宽度属性

• 在您的情况下，解决方案是为第二个div提供固定的宽度和高度

• 另外，对于JQuery，您只需要一个$（document）.ready函数

$（文档）.ready（函数（）{
$（'#显示隐藏按钮'）。单击（函数（）{
$（'some#u box'）。设置动画({
宽度：“切换”
});
$（'.second'）。设置动画({
宽度：“切换”
});
});
});
#一些盒子{
背景#fc0；
宽度：25%；
高度：200px；
}
.第二次img{
宽度：100%；
身高：100%；
}
.第二{
宽度：200px；
高度：200px；
}

点击我
您尚未在css中正确分配
.second
宽度。很抱歉，我对该网站有点陌生，但谢谢。有没有办法让负责任的形象拥有和我的第一部一样的动画？你说的“同样的动画”是什么意思？您是否试图在图像高度保持不变的情况下使宽度折叠？@111000110010001用此选择器替换您的第二个选择器，问题已解决$（'.second img'）。动画（{width:'toggle'}）@EugenUnic不起作用，因为图像的高度仍然会随着其宽度的变化而塌陷。@eugen sunic我尝试过它为我做了同样的事情：/@benjarwar是的，确实如此，就像它在第一个黄色div中所做的那样，但唯一的区别是我希望我的img保持响应性（不管它是像本例中的img还是div的背景图像）这可能吗？啊，好的，谢谢，我知道在固定的宽度和高度下，我想知道有没有什么方法可以用负责任的div或image来做到这一点$（“.second”）.stop（true，false）.show（“幻灯片”{direction:“left”}，2000）；我这样做了，但它可以从定义的一侧滑动整个div，但不是我真正想要的：/n如果你的意思是，你想为你的div添加相同的动画，你可以在动画中添加多个选择器：$（“.second，#some_box”）.stop（true，false）。show（“slide”，{direction:“left”}，2000）；
#some_box {
  background: #fc0;
  width: 25%;
  height: 200px;
}

.second {
  width: 25%;
  height: 200px;
}

.second img {  
  max-width: 100%;
  max-height: 100%;
}

$(document).ready( function(){
  $('#show_hide_button').click( function() {
    $('#some_box').animate({ width: 'toggle' });

    var $secondImg = $('.second img'),
        secondImgMargin = $secondImg.is(':visible') ? '50%' : 0;

    $('.second img').animate({
      width: 'toggle',
      marginTop: secondImgMargin
    });
  });
});