.animate({width:'toggle'})而不会弄乱内容 [英] .animate({ width: 'toggle' }) without messing up the content

问题描述

所以我的左滑div出现了问题.目前，我正在使用$('#searchBox').animate({ width: 'toggle' });进行显示，但是当它滑动时，看起来好像其内部的内容被忽略了它们的浮点数.它们在div停止滑动后被修复，但是在滑动时这是一个怪异的效果.我正在使用的代码:

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

我知道解决此问题的方法是在#magnifier，#searchBoxInput和.closeButton上使用绝对位置，但这对我不利.还有其他方法吗?

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?

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

推荐答案

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

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.

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

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

具有幻灯片效果

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

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

  }

这篇关于.animate({width:'toggle'})而不会弄乱内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！