How to move a div using a slide effect?

This code switches the visibility of frm01

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

But underlying div (div bellow frm01) is moved up/down momentarily, without slide effect. I want to move it also using slide effect.

Answers


If it is a separate div, why not simply add that div to the jquery selector as well?

$(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);
    });
});

Or, if you just want to animate the movement of the div, use the jquery .animate() function.

$(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);
        }
    });
});

More on animating CSS changes here


Need Your Help

ASP.Net MVC - Passing posted value to view

asp.net-mvc

I am creating a search page, the user types in the textbox and click 'Search', the controller takes the FormCollection in its Action method.

Can send two emails individually but not together

ruby-on-rails

I'm having a real humdinger of a problem. If I run the following on the console