Jquery .animate({width:';toggle';})而不会弄乱内容
所以我的左滑动分区有问题。目前我使用的是Jquery .animate({width:';toggle';})而不会弄乱内容,jquery,Jquery,所以我的左滑动分区有问题。目前我使用的是$('#searchBox')。动画({width:'toggle'})来显示它,但是当它滑动时,它里面的内容看起来被忽略了。在div停止滑动后,它们是固定的,但滑动时会产生奇怪的效果。我正在使用的代码: // Search bar dropdown script function searchBar() { $('#searchBox').animate({ width: 'toggle' }); $('#sea
$('#searchBox')。动画({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');
}
我知道解决这个问题的方法是在#放大镜
、#searchBoxInput
和.closeButton
上使用绝对位置,但这对我来说并不好。还有别的办法吗
小提琴:由于宽度的原因,它的表现是如此。它没有足够的宽度来显示浮动在同一行上的项目。没有足够的宽度显示它们。相反,您可以切换到正确的位置
具有滑动效果
下面是一个JSFIDLE,它的功能更像您希望使用的宽度而不是右侧。注意,我更改了一些CSS并排除了搜索按钮本身,因为我没有访问该图像的权限。但简而言之,这里是主要的修复方法:
function searchBar() {
$('input').fadeIn('fast', function () {
$('#searchBox').animate({ width: 'toggle' });
});
}
请注意,您需要输入框的宽度,这样就不会有大小问题。上面的方法应该有效,下面是
注意:这里有一个额外的锚,只是为了再次演示,因为我没有访问到您的放大镜按钮,但您应该了解这个想法。如果它不能正常工作,请告诉我。有没有办法让它像旧的一样滑动?这样看来,它只是看起来没有任何效果。不过,谢谢你的回答。@Gus在下面用jsfiddle查看我的答案。我想这就是你想要的。是的,你可以用jquery ui效果来制作幻灯片效果。谢谢你的回答!我在小提琴上使用了占位符图像,但忘了在代码上更新它,已经编辑了这篇文章。所以基本的想法是隐藏输入、放大镜和关闭按钮,并在调用searchBar()函数时显示它们?我在适应上有些困难,但我想我已经掌握了基本的想法。@Gus如果正确,请标记为正确。如果您需要进一步的帮助,请使用正确的参考资料更新小提琴,我会为您修复它。这一个有占位符图像,应该可以正常工作。searchBoxButton应该是一块黑色的瓷砖。不用担心,PSL的回答解决了我的问题。不过,我真的很感谢你抽出时间来帮助我。谢谢
#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;
}
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');
});
}
function searchBar() {
$('input').fadeIn('fast', function () {
$('#searchBox').animate({ width: 'toggle' });
});
}