2

以下に提供したコードスニペットに基づいて、これを左から右に移動するスライド div にする簡単な方法はありますか?

では、上下ではなく、左右に動かしますか?

$(document).ready(function() {

    $("#open").click(function(){
        $("div#panel").slideDown("slow");

    }); 

    $("#close").click(function(){
        $("div#panel").slideUp("slow"); 
    });     

    $("#toggle a").click(function () {
        $("#toggle a").toggle();
    });

});
4

3 に答える 3

2

非表示のアニメーションを使用して、左右からスライドさせることができます。

$(document).ready(function() {

    $("#open").click(function(){
        $("div#panel").show('slide', {direction: 'right'}, "slow");
    }); 

    $("#close").click(function(){
        $("div#panel").hide('slide', {direction: 'left'}, "slow");
    });     

    $("#toggle a").click(function () {
        $("#toggle a").toggle();
    });

});
于 2013-08-11T12:01:11.130 に答える
1

jQueryUI とスライド効果を使用できます。

例：

$("div#panel").hide("slide", {direction: "left" }, 1000);
$("div#panel").show("slide", { direction: "right" }, 1000);
于 2013-08-11T12:02:32.693 に答える
1

jQuery animate http://api.jquery.com/animate/を使用できます

$(document).ready(function() {

    var  myDivWidth = $( "div#panel" ).width();

    $("#open").click(function(){
        $( "div#panel" ).css({'width' : '0' }).animate({width: myDivWidth}, 'slow');
    }); 

    $("#close").click(function(){
        $( "div#panel" ).animate({width: 0}, 'slow'); 
    });      

});

アップデート ：

これがjsfiddle http://jsfiddle.net/ck4PX/
更新されたjsfiddle http://jsfiddle.net/QGXQm/です

于 2013-08-11T12:24:40.607 に答える