Question

我有两个带动画的div，两个都在做同样但动画不同。我有

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

jsfiddle Working Plunker

中的整个代码

任何人都可以向我解释为什么第一个div是从右到左动画，从左到右，第二个div是动画总是在左上角。

如何使第二个div与第一个div相同？

Answer 1

首先，您的代码中的相关详细信息应包含在您的问题中（除了提供小提琴）。但是你有以下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>

请注意，您要将img设置为具有其父容器的最大宽度和高度。因此，由于您正在切换父级的宽度，因此当父级折叠时，图像会缩小。此外，由于您在img上没有高度设置，因此其高度将与动画宽度一起设置动画。这会产生图像动画效果到左上角。

如果没有进一步的细节，很难说如何修复代码以达到预期的效果。

<强>更新

如果您希望宽度仅折叠，可以在图像上设置像素高度，使其不会与其宽度成比例缩放：

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

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

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

分叉你的小提琴：http://jsfiddle.net/u1sdd8j5/1/

更新2

从评论中，您似乎希望图像向左折叠，而不会丢失纵横比。我们需要有一点创意来解决这个问题，特别是如果您正在寻找涉及jQuery.animate()的解决方案。当图像缩小时，图像实际上需要向下移动。我们可以通过动画<img>本身而不是它的容器来调整它，并在调整其上边距的同时为其宽度设置动画。

修改CSS（使容器具有相同的大小以保持一致性）：

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

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

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

修订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
    });
  });
});

请注意，我们需要先确定<img>是否可见。如果是，那么我们想要将上边距设置为50％。如果不是，则将上边距切换回0.

这是一个新的分叉小提琴：http://jsfiddle.net/xwanm9ze/1/

最后的注释

使用CSS3过渡可能更容易实现所有这些。您可能希望设置一个切换动画的类。并且您可以指定transform-origin，在这种情况下，{{3}}将保持中心位置。

Answer 2

问题是，您在第二个div中添加了一个相对宽度和高度属性，并没有给第二个div赋予高度和宽度属性。这样，图像控制第二个div的高度和宽度，因为它没有高度和宽度属性。

在您的情况下，解决方案是给第二个div一个固定的宽度和高度
此外，对于JQuery，您只需要一个$（文档）.ready函数

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

#some_box {
    background: #fc0;
    width: 25%;
    height: 200px;
}
.second img {
    width:100%;
    height:100%;
}
.second {
    width:200px;
    height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

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

2 个答案: