Hide a relative div with Javascript

Question

I am designing a contact form which has a 'Thank you' message pop up on send, I need my thank you message to be positioned relative, other wise if the user happens to scroll while the animation is running the message remains stuck in place and ruins the animation. However positing the div relative keeps it in the position before it loads, what I need is a way to have the div display:none or opacity:0 BEFORE the send button is pressed, is that possible?

Here is an http://jsfiddle.net/gcQ8f/ to explain what I'm trying to achieve a little better

And below is the Javascript I'm using

$(document).ready(function(){
$(".send-button").click(function(){

$("#contact-form") .delay(1000) .animate({ height:'toggle', opacity:'toggle' }, (400));

$("#contact-form") .delay(3000) .animate({ height:'toggle', opacity:'toggle' }, (400));
$(".contact").reset();
});
});

Any help would be really appreciated :)

Thanks guys!

Gavin · Accepted Answer · 2014-03-08 16:45:17Z

3

Just assign an ID or class (for example id="myThankYouDIV") to your DIV and hide it with display: none in your CSS. Then when you're ready to show it (when you click the button), just call $('#myThankYouDIV').show() $('#myThankYouDIV').fadeIn().

EDIT: I think I misunderstood your question a bit. You want to show the "Thank you" message after the animation is complete, right? You still need to hide it using CSS, but to show it just do this:

$("#contact-form") .delay(3000) .animate(
    { height:'toggle', opacity:'toggle' },
    400,
    function(){
        // animation is complete
        $('#myThankYouDIV').fadeIn();
    }
);

;

edited Mar 8, 2014 at 16:45

answered Mar 8, 2014 at 16:40

Gavin

8,0944 gold badges58 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

user3380148 Over a year ago

Hi @Gavin, thanks for your suggestion, that has however stopped the initial function entirely, here take a look jsfiddle.net/gcQ8f/6 I may well be doing something wrong as I am quite the novice when it cones to javascript

user3380148 Over a year ago

Well the 'Thank you' message is part of the animation, the effect I am after is quite simple, on clicking send I want the form to fade out (or slide) a Thank you message to fade/slide in, and the reverse it so the user ends up back with the form.

Gavin Over a year ago

Check this out: jsfiddle.net/gcQ8f/20 There were quite a few errors in your code that I had to fix :)

Gavin Over a year ago

Also, you are trying to reset your form using $('.form').reset(). This will not work in jQuery. You need to get the native javascript element like this: $('.form')[0].reset()

user3380148 Over a year ago

That is almost perfect @Gavin the only thing I want to do now is make the form fade out, is that possible? Thanks SO much!

|

Collectives™ on Stack Overflow

Hide a relative div with Javascript

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related