[英]jQuery: Slidetoggle from bottom to top
I am using jQuery's slidetoggle, and I am wondering if there is a way I can make it slide up from the bottom, everywhere I look I cant seem to find the answer, here is the code I am using: 我正在使用jQuery的slidetoggle,我想知道是否有一种方法可以让它从底部向上滑动,我看到的任何地方似乎无法找到答案,这是我正在使用的代码:
jQuery(document).ready(function(){
jQuery(".product-pic").hover(function(){
jQuery(this).find('.grid-add-cart').slideToggle('2000', "easeOutBack", function() {
// Animation complete.
});
});
});
Do you want to achieve something like this ? 你想实现这样的目标吗?
HTML HTML
<div id="box">
<div id="panel">
</div>
</div>
CSS CSS
#box
{
height: 100px;
width:200px;
position:relative;
border: 1px solid #000;
}
#panel
{
position:absolute;
bottom:0px;
width:200px;
height:20px;
border: 1px solid red;
display:none;
}
JS JS
$("#box").hover(function(){
$("#panel").slideToggle();
}, function(){
$("#panel").slideToggle();
});
OR as per Update suggested by Roko 或根据Roko建议的更新
var panelH = $('#panel').innerHeight();
$("#box").hover(function(){
$("#panel").stop(1).show().height(0).animate({height: panelH},500);
}, function(){
$("#panel").stop(1).animate({height: 0},500, function(){
$(this).hide();
});
});
You can do it by using a wrapper on the element you want to toggle. 您可以通过在要切换的元素上使用包装器来完成此操作。 Set the position of the wrapper to relative and the position of the element to toggle to absolute with the bottom property set to zero.
将包装器的位置设置为relative,并将元素的位置切换为绝对,并将bottom属性设置为零。
Like this jsFiddle example . 像这个jsFiddle例子 。
jQuery: jQuery的:
$("button").click(function() {
$("p").slideToggle("slow");
});
CSS: CSS:
p {
position:absolute;
bottom:0;
display:none;
padding:0;
margin:0;
}
div {
position:relative;
width:300px;
height:100px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.