6

私はjQueryのslidetoggleを使用していますが、下から上にスライドさせる方法があるかどうか疑問に思っています。どこを見ても答えが見つからないようです。使用しているコードは次のとおりです。

jQuery(document).ready(function(){ 
    jQuery(".product-pic").hover(function(){
        jQuery(this).find('.grid-add-cart').slideToggle('2000', "easeOutBack", function() {
            // Animation complete.
        });
    });
});
4

4 に答える 4

11

このようなことを達成したいですか？

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();  
    });
});​
于 2012-05-11T18:25:46.363 に答える
10

切り替えたい要素のラッパーを使用してこれを行うことができます。ラッパーの位置を相対に設定し、要素の位置を絶対に切り替えて、下部のプロパティをゼロに設定します。

この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;
}
于 2012-05-11T18:29:12.117 に答える
3

ライブデモ

jQuery(function($){

  $(".product-pic").hover(function( e ){
    var px  = e.type=="mouseenter"? 0 : 220 ;
    $(this).find('.grid-add-cart').stop().animate({top:px});
  });
});
于 2012-05-11T18:30:26.680 に答える
0

最も簡単な方法は、そのためにjQuery UIを使用することです。jQueryだけでは、そのための個別の関数はありません。こことここを参照してください。

もう1つの方法は、animate関数を使用してCSSアニメーションを実行することです。

于 2012-05-11T18:19:41.097 に答える