插入内联元素并设置向左移动的动画

Insert inline element and animate shift to left

本文关键字：左移 移动 动画 设置 元素 插入      更新时间：2023-09-26

我已经试着解决这个问题一周了，它看起来很基本，所以我可能错过了一些东西。

我想让一个div位于屏幕（或其容器）的中心，然后在它的右边插入第二个div，这样之后它们两个就居中了（两边的空间相等）。

插入第二个div不是问题，但我需要第一个块在插入新块后滑动到它的位置
http://jsfiddle.net/rdbLbnw1/

.container {
   width:100%;
   text-align:center;
}
.inside {
   border:solid 1px black;
   width:100px;
   height:100px;
   display:inline-block;
}
$(document).ready(function() {
    $("#add").click(function() {
        $(".container").append("<div class='inside'></div>");
    });
});
<div class="container">
    <div class="inside"></div>
</div>
<input id="add" type="button" value="add"/>

我需要明确计算原始长方体的终点，然后设置动画吗？或者有更好的方法吗？

我喜欢你的问题，所以决定写这个：

$(document).ready(function() {
    var isInAction = false;
    var intNumOfBoxes = 1;
    var intMargin = 10;
    $containerWidth = $(".container").width();
    $insideWidth = $(".inside").width();
    $(".inside").css('margin-left',($containerWidth - $insideWidth - intMargin)/2 + 'px');
    $("#add").click(function() {
        if (!isInAction){
            isInAction = true;
            intNumOfBoxes +=1;
            $(".current").removeClass("current");
            $(".container").append("<div class='inside current'></div>");
            $('.inside').animate({
                'margin-left': '-=' + ($insideWidth + intMargin)/2 + 'px'
            }, 300, function () {
                $(".current").css('margin-left',($containerWidth + ((intNumOfBoxes - 2) * ($insideWidth + intMargin)))/2 + 'px');
                $(".current").fadeIn(500,function(){
                    isInAction = false;
                });
            });
        }
    });
});

也在CSS:中添加此类

.current {
    display:none;
}

除了intMargin之外，您不需要更改JS代码中的变量。您可以更改这个var来设置框之间的边距。

注意：此代码在较旧的浏览器上也可以正常工作，不需要支持transition等CSS3功能。

更新：修复了一些类似重复点击的错误。

检查JSFiddle演示

首先，我们只能对具有显式数值（如宽度、左侧或边距）的事物进行动画处理。我们不能动画化对齐之类的东西（实际上使用了相同的margin属性，但隐含地，更不用说了）。所以，若我们知道插入的div的宽度，就把它添加到我们的容器中。

1） 让我们将容器本身居中，并将转换添加到

.container {
    width: 102px; /* set explicit width; 102 - because of borders */
    margin: auto; /* set margin to 'auto' - that will centre the div */
    transition: width 0.5s;
}

2） 然后在添加div 时增加宽度

$(".container").width($(".container").width() + 102);

3） 但是等一下！如果我们将div添加到太窄的容器中，它将被添加到底部而不是右侧。因此，我们需要在之前将另一个容器设置为适当的宽度。

请参阅JSFiddle上的最后一个示例。

顺便说一句，当你使用内联块时，从你的代码中删除所有的换行符和制表符，因为这会在你的块之间造成空格。

相关文章：