如何使用幻灯片效果移动div?

时间:2012-07-16 07:34:43

标签: javascript jquery effects

此代码切换frm01的可见性

$(document).ready(function () {
    $("#reg").click(function () {
        if ($("#frm01").is(":visible")) $("#frm01").hide("slide", {
            direction: "down"
        }, 1000);
        else $("#frm01").show("slide", {
            direction: "down"
        }, 1000);
    });
});

但潜在的div(div bellow frm01)暂时上下移动,没有滑动效果 我想使用幻灯片效果移动它。

1 个答案:

答案 0 :(得分:1)

如果它是一个单独的div,为什么不简单地将该div添加到jquery选择器呢?

$(document).ready(function() {
    $("#reg").click(function () {
        if ($("#frm01").is(":visible"))
            $("#frm01,#otherdiv").hide("slide", { direction: "down" }, 1000);
        else
            $("#frm01,#otherdiv").show("slide", { direction: "down" }, 1000);
    });
});

或者,如果您只想为div的移动设置动画,请使用jquery .animate()函数。

$(document).ready(function() {
    $("#reg").click(function () {
        if ($("#frm01").is(":visible")) {
            $("#frm01").hide("slide", { direction: "down" }, 1000);
            $("#otherdiv").animate({margin-top: "50px"}, 1000);
        } else {
            $("#frm01").show("slide", { direction: "down" }, 1000);
            $("#otherdiv").animate({margin-top: "100px"}, 1000);
        }
    });
});

更多关于动画CSS更改here

的内容