I'm working on creating a page with 2 questions and yes/no buttons using jQuery. I've implemented jQuery fade in/out effects for this purpose. However, the buttons don't seem to be functioning as expected. Could someone lend me a hand here??
I've provided all the code snippets of my page including CSS and jQuery.
jQuery:
$(document).ready(function () {
$(".qusone").click(function () {
$(".one").fadeOut(100);
$(".two").delay(100).fadeIn(100);
});
$(".qustwo").click(function () {
$(".two").fadeOut(100);
$(".three").delay(100).fadeIn(100);
});
// More jQuery functions go here...
});
CSS:
* {
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
background: #EEF3FA;
text-shadow: none;
}
// More CSS styles go here...
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div class="main head fix">
<h1>Message</h1>
</div>
</header>
// HTML content goes here...
<footer>
<div class="main">
<p class="fotter">copyright 2013 <a href="#">Terms</a>
<a href="#">Privacy</a>
</p>
</div>
</footer>