Javascript 使用jQuery animate向左滑动时保留css浮动

我在使用jQuery的动画时遇到了css问题。我尝试了一些方法来让它工作，但没有效果。基本上，我所要做的就是通过点击事件左右滑动侧栏，但是css浮动似乎引起了问题。我确切地知道这个问题，但不知道如何确切地解决它。我没有试图解释这个问题，而是用JSFIDLE复制了它：

主contentarticle似乎下降了毫秒，因为它具有浮点样式

<a href='#' class='slide-side'>Slide</a>
<div style='clear:both;'></div>
<aside  data-side-bar="open"></aside>
<article></article>

$('.slide-side').click(function (e)
    {
        var asideWidth = $("aside").width();
        var isOpen = $('aside').attr("data-side-bar");
        if (isOpen == "open") {
            $('aside').animate({ marginLeft: '-=' + asideWidth });
            $('article').animate({ width: '100%',});
            $('aside').attr("data-side-bar", "close");
        }
        else if (isOpen == "close")
        {

            $('aside').animate({ width: '20%', marginLeft: '0' });
            $('article').animate({ width: '80%' });
            $('aside').attr("data-side-bar", "open");
        }
    });

非常感谢您的帮助！关于写得更好的建议当然是最受欢迎的

---

关于，

使用绝对定位，而不是让对象使用浮动CSS：左或右或其他。例如：

HTML

Javascript/jQuery

因此，我需要做的就是在jQuery中将left属性设置为div的负宽度，然后它消失，然后将其设置回0将使它再次出现。当然，这是假设您希望侧边栏位于左侧，否则使用right而不是left

---

另外请注意，如果您希望侧边栏在用户浏览应用程序时跟随用户，您也可以设置position:fixed，使其在用户滚动时跟随用户。

对脚本稍作更改，将+5置于一旁

$('.slide-side').click(function (e)
    {
        e.preventDefault();
        var asideWidth = $("aside").width();
        var isOpen = $('aside').attr("data-side-bar");
        if (isOpen == "open") {
            $('aside').animate({ marginLeft: '-=' + asideWidth+5});
            $('article').animate({ width: '100%',});
            $('aside').attr("data-side-bar", "close");
        }
        else if (isOpen == "close")
        {

            $('aside').animate({ width: '20%', marginLeft: '0' });
            $('article').animate({ width: '80%' });
            $('aside').attr("data-side-bar", "open");
        }
    });

---

我开始意识到使用position而不是float更适合jQuery。永远不会有不那么简单的答案。

#sidebar{
    position: absolute;
    width: 100px;
    left: 0px;
    top: 100px; /* top offset */
}

hideSidebar = function(){
    $("#sidebar").animate(
        {
             left: "-100px"
        },
        500
    }
}

$('.slide-side').click(function (e)
    {
        e.preventDefault();
        var asideWidth = $("aside").width();
        var isOpen = $('aside').attr("data-side-bar");
        if (isOpen == "open") {
            $('aside').animate({ marginLeft: '-=' + asideWidth+5});
            $('article').animate({ width: '100%',});
            $('aside').attr("data-side-bar", "close");
        }
        else if (isOpen == "close")
        {

            $('aside').animate({ width: '20%', marginLeft: '0' });
            $('article').animate({ width: '80%' });
            $('aside').attr("data-side-bar", "open");
        }
    });