.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'); }
#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上使用绝对位置，但这对我.closeButton 。 有没有其他方法可以做到这一点？
小提琴： http ： //tinker.io/ef4f7
由于宽度，它表现得如此。 它没有足够的宽度来显示浮动在同一行上的项目。 没有足够的宽度来显示它们。 相反，你可以切换正确的位置。
演示
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'); }); }
这是一个jsfiddlefunction更像你想要使用宽度而不是右边。 注意我更改了一些CSS并排除了搜索按钮本身，因为我无法访问该图像。 但总之，这是主要的解决方案：
function searchBar() { $('input').fadeIn('fast', function () { $('#searchBox').animate({ width: 'toggle' }); }); }
看到您需要输入框宽度，以便您没有尺寸问题。 上面应该工作，这里是jsfiddle
注意：有一个额外的锚点只是为了再次演示，因为我没有访问你的放大镜按钮，但你应该明白这个想法。 如果它不能正常运行，请告诉我。