Fading out an article and dropping down a form at the same time?
- by eveo
I have an article:
<article>
Some paragraphs.
</article>
Below that I have my contact:
<div id="contact">
stuff, this form is 600 px tall
</div>
contact is set to display:none;.
I use jQuery to toggle it. What I'm trying to do is modify this script from http://tutsplus.com/lesson/slides-and-structure/ so that it fades out the article text and then slides in the contact form. Having some trouble.
Code:
<script>
(function() {
$('html').addClass('js');
var contactForm = {
container: $('#contact'),
article: $('article'),
init: function() {
$('<button></button>', {
text: 'Contact Me'
})
.insertAfter('article:first')
.on('click', function() {
console.log(this);
this.show();
// contactForm.article.fadeToggle(300);
// contactForm.container.show();
})
},
show: function() {
contactForm.close.call(contactForm.container);
contactForm.container.slideToggle(300);
},
close: function() {
console.log(this);
$('<span class=close>X</span>')
.prependTo(this)
.on('click', function(){
contactForm.article.fadeToggle(300);
contactForm.container.slideToggle(300);
})
}
};
contactForm.init();
})();
</script>
The part that is not working is:
.on('click', function() {
console.log(this);
this.show();
// contactForm.article.fadeToggle(300);
// contactForm.container.show();
})
When I do .on('click', this.show); it works fine, when I put this.show in a function it does not work!
