jquery - .animate({ width: 'toggle' }) without messing up the content

Question

So I'm having a problem with my left-sliding div. Currently I'm using $('#searchBox').animate({ width: 'toggle' }); to show it, but while it is sliding it looks like the the content inside of it gets their float ignored. They are fixed after the div stops sliding, but it's a weird effect while it slides. The codes I'm using:

// 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;
}

I know a workaround for this problem would be using absolute positions on #magnifier, #searchBoxInput and .closeButton, but that wouldn't be good for me. Is there any other way to do this?

Fiddle: http://tinker.io/ef4f7

Answer 1

It is behaving so because of the width. It doesn't have enough width to show the items floating on the same line. There is no enough width to show them. Instead you can toggle right position.

Demo

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

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

With slide Effect

Demo

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

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

  }