jquery – .animate({width：’toggle’}),不会弄乱内容

所以我的左滑div有问题.目前我正在使用$(‘#searchBox’).animate({width：’toggle’});显示它,但是当它滑动时,看起来它内部的内容会忽略它们的浮动.它们在div停止滑动后被固定,但是当它滑动时它是一种奇怪的效果.我正在使用的代码：

// Search bar dropdown script

    function searchBar() {
        $('#searchBox').animate({ width: 'toggle' });
        $('#searchBoxButton').fadeToggle('fast');
    }

    function searchBarClose() {
        $('#searchBox').animate({ width: 'toggle' });
        $('#searchBoxButton').fadeToggle('fast');
    }

<div id="searchBoxButton" onclick="searchBar()"></div>
<div id="searchBox">
    <form>
        <div id="magnifier"></div>
        <input id="searchBoxInput" placeholder="Search me" type="text"/>
        <div class="closeButton" onclick="searchBarClose()"></div>
    </form>
</div>

#searchBoxButton {
    width: 50px;
    height: 50px;
    background-color: #000;
    right: 0;
    position: absolute;
    margin: -5px auto 0 auto;
}

#searchBox {
    display: none;
    right: 0;
    position: fixed;
    margin: -5px auto 0 auto;
    background-color: #202020;
    z-index: 1;
    padding: 3px 0;
    border: 1px solid #151515;
}

#searchBox input[type="text"] {
    width: 150px;
    outline: none;
    padding: 3px 2px;
    background-color: #3F3F3F;
    border: 1px solid #4d4d4d;
    border-radius: 3px;
    font-family: "Trebuchet MS" sans-serif;
    color: #c0c0c0;
    float:left;
}

#searchBox input[type="text"]:focus {
    border: 1px solid #797979;
    box-shadow: 0px 0px 15px -2px #797979;
    background-color: #444444;
}

#searchBoxInput::-webkit-input-placeholder { /* WebKit browsers */
    color:    #7d7d7d;
}
#searchBoxInput:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #7d7d7d;
}
#searchBoxInput::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #7d7d7d;
}
#searchBoxInput:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #7d7d7d;
}

#magnifier {
    background: url("http://placehold.it/13x13") no-repeat;
    width: 13px; height: 13px;
    float: left;
    margin: 7px 6px;
}

.closeButton {
    border-radius: 15px;
    cursor: pointer;
    background: url("http://placehold.it/15x15") center no-repeat;
    width: 15px; height: 15px;
    float: left;
    -webkit-transition: background 200ms ease-in-out;
    -moz-transition: background 200ms ease-in-out;
    -o-transition: background 200ms ease-in-out;
    transition: background 200ms ease-in-out;
}

#searchBox .closeButton {
    margin: 7px 4px;
    float: left;
}

.closeButton:hover {
    background-color: #373737;
    -webkit-transition: background 200ms ease-in-out;
    -moz-transition: background 200ms ease-in-out;
    -o-transition: background 200ms ease-in-out;
    transition: background 200ms ease-in-out;
}

.closeButton:active {
    background-color: #212121;
}

我知道这个问题的解决方法是在#magnifier,#searchBoxInput和.closeButton上使用绝对位置,但这对我不利.有没有其他方法可以做到这一点？

小提琴：http://tinker.io/ef4f7

由于宽度,它表现得如此.它没有足够的宽度来显示浮动在同一行上的项目.没有足够的宽度来显示它们.相反,你可以切换正确的位置.

Demo

function searchBar() {
        $('#searchBox').animate({ right: 'toggle' });
        $('#searchBoxButton').fadeToggle('fast');
    }

    function searchBarClose() {
        $('#searchBox').animate({ right: 'toggle' });
        $('#searchBoxButton').fadeToggle('fast');
    }

用幻灯片效果

Demo

function searchBar() {
      $('#searchBox').show('slide', {
          direction: 'right'
      }, 2000);
      $('#searchBoxButton').fadeToggle('slow');
  }

  function searchBarClose() {
      $('#searchBox').hide('slide', {
          direction: 'right'
      }, 2000, function () {
          $('#searchBoxButton').fadeToggle('slow');
      });

  }