Jquery 以中心内容设置div动画-从右到左逐渐显示顶部

我正在尝试制作一个动画，其中一个div“改变了它的颜色”，其中的内容也改变了。 动画中的不同阶段如下所示。 您在图像中看到的div在视图中如下所示。我将类命名为row1，因为当我仅使用“row”时，我意识到引导程序可能会搞乱某些东西

<div class="row1 facebook">
    <div class="logo">
        <div class="image"></div>
        <label class="text">facebook</label>
    </div>
</div>

脸谱网

我试着使用2个div，其中底部的一个是白色背景，顶部的一个是彩色的，一开始是0px，然后逐渐增加宽度，溢出-x:hidden，但是我遇到了一些问题，因为我试图保持内容的中心位置，以便在调整大小时内容不断移动

---

您需要设置主容器， 动画背景， 然后是标志

<div id="container">
     <div id="animated">
     </div>
     <div id="logo">
     </div>
</div>

---

像这样的东西怎么样：

HTML:

<div class="container">
    <div class="hover">
        <div>Facebook</div>
    </div>
    <div class="default">
        <div>Facebook</div>
    </div>
</div>

$(".container").on({
    "mouseenter" : function() {
        $(".default", this).stop().animate({
        width: "0%",
        }, 700, function() {
            $("div", this).hide();
        });
    },
    "mouseleave" : function() {
        $(".default div", this).show();
        $(".default", this).stop().animate({
        width: "100%",
        }, 700);
    }
});

.default和.hover中的div应根据其父级大小进行定位，并将其位置属性设置为绝对值。这样，即使它们的父宽度正在更改，元素也将保持其位置

有关更多详细信息，请查看此处，您将看到我如何使用CSS和jQuery定义每个元素的大小及其位置。

演示：

解释：我使用jquery设置内部div的宽度并将其定位为绝对值。当只使用css移动它的父div时，这会导致它剪辑它的子元素

我添加了更多的动画，这不是你想要的，但我想这是值得的

代码：

Js

css

---

谢谢你的努力，但这不是我所需要的。请注意，在图像中，动画容器也有徽标和文本，但颜色不同。请为其他浏览器添加相关前缀。对于transition属性，现在transition仅适用于chrome或webkit浏览器。我现在正在查看您的解决方案，看起来很有希望，谢谢！第二个版本的小提琴是我需要的，非常感谢你的帮助和努力！

$('.main').width($('.out').width());
$(window).resize(function(){
    $('.main').width($('.out').width());
});

* {    padding: 0; margin: 0;}
.out {
    height: 180px;
    font-family: "Helvetica";
    font-size: 0;
    cursor:pointer;
    position: relative;
    overflow: hidden;
}

.bg, .top {
    font-size: 1rem;
    height: 180px;
    text-align: center;
    line-height: 170px;
}
.bg {
    background: radial-gradient(circle at center, #ffffff 0%,#ffffff 59%,#ededed 100%);
}

.top, .main {
    position: absolute;
    right: 0; top: 0; 
    overflow: hidden;
}
.top {
    width: 0;
    -webkit-transition: all .5s;
}
.out:hover .top {
    width: 100%;
}
.main {
    background-color: #f53f39;
    color:white;
}