私はjQueryのslidetoggleを使用していますが、下から上にスライドさせる方法があるかどうか疑問に思っています。どこを見ても答えが見つからないようです。使用しているコードは次のとおりです。
jQuery(document).ready(function(){
jQuery(".product-pic").hover(function(){
jQuery(this).find('.grid-add-cart').slideToggle('2000', "easeOutBack", function() {
// Animation complete.
});
});
});
this のようなものを達成したいですか?
HTML
<div id="box">
<div id="panel">
</div>
</div>
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
$("#box").hover(function(){
$("#panel").slideToggle();
}, function(){
$("#panel").slideToggle();
});
または 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();
});
});
切り替えたい要素のラッパーを使用してこれを行うことができます。ラッパーの位置を相対に設定し、要素の位置を絶対に切り替えて、bottomプロパティをゼロに設定します。
このようにjsFiddleの例。
jQuery:
$("button").click(function() {
$("p").slideToggle("slow");
});
CSS:
p {
position:absolute;
bottom:0;
display:none;
padding:0;
margin:0;
}
div {
position:relative;
width:300px;
height:100px;
}
jQuery(function($){
$(".product-pic").hover(function( e ){
var px = e.type=="mouseenter"? 0 : 220 ;
$(this).find('.grid-add-cart').stop().animate({top:px});
});
});