Question: JQUERY help with Animation Method I am right now stuck with some JQUERY problems relating animation in Jquery. I need to fix my code, could
JQUERY help with Animation Method
I am right now stuck with some JQUERY problems relating animation in Jquery. I need to fix my code, could anyone help me?
I need to use the animate () method to move the ad that is now showing static into view on the web-code I am including here. The animation needs to happen when the page loads and after a delay of 5 seconds. The animation needs to move the ad from -500px at the top to 100px from the top, over for 5 seconds. When the X is clicked on, the ad will fade out over a duration of 5 seconds
The code should be inside a $(document).ready() event..
I need to use the appropriate jQuery effect method to show and hide the login form by sliding it up and down which will occur for a duration of 1 second.
And validate that the user has entered a value for the username and password. If both fields have some data, the code writes Please stand by! If the fields are empty it shows Please enter both login and password! ( in the bottom of the box)
Can anyone help me to figure it out?
If you notice my ad is right now in the middle of the page without moving
Here is what I have right now
body {
background-color: #fff;
font-family: arial, sans-serif;
font-size: 100%;
}
a {
color: blue;
}
#welcome p strong {
color: navy;
font-size: 1.2em;
}
#welcome p:first-of-type {
margin-bottom: 50px;
}
section {
margin-bottom: 50px;
}
/* main container */
#main {
width: 960px;
margin: 50px auto;
border: 2px solid #000;
padding: 20px;
background-color: #e0e0ff;
position: relative;
box-sizing: border-box;
}
/* form container */
#loginDiv {
width: 300px;
position: absolute;
left: 650px;
top: 6px;
z-index: 100;
border: 1px solid navy;
}
/* paragraph that shows the text "Login" which is clicked on to display/remove the form */
#login {
margin: 0;
cursor: pointer;
background-color: rgb(255, 255, 255);
padding: 5px 0 2px 30px;
}
#login:hover {
background-color: rgb(110, 138, 195);
}
/* plus sign icon for login form */
.plus {
background: url(img_open.png) no-repeat 8px 7px;
background-color: rgb(110, 138, 195);
}
/* minus sign icon for login form */
.minus {
background: url(img_close.png) no-repeat 8px 7px;
}
/*form is hidden when the page loads */
#loginDiv form {
padding: 10px 10px 10px 10px;
display: none;
background-color: rgb(255, 255, 255);
}
#loginDiv label {
display: block;
width: 100px;
margin: 0 15px 0 0;
}
#loginDiv input {
font-size: 1.2em;
border: 1px solid navy;
}
#loginDiv input:focus {
background-color: rgb(110, 138, 195);
border: 2px solid navy;
}
#loginDiv input[type=button] {
width: 100px;
}
footer {
text-align: center;
margin-top: 50px;
margin-bottom: 10px;
padding: 20px;
border-top: 1px solid #000;
}
/* ad is not shown when the page loads */
#ad {
width: 300px;
height: 300px;
border: 1px solid #000;
background-color: yellow;
position: absolute;
left: 330px;
top: 3px;
/* you can change this inbitially for viewing purposes only but be sure to set it back */
box-sizing: border-box;
background:#4242B8;
background-image: url(ad.jpg);
background-repeat: no-repeat;
}
/* close button on ad */
#adbtn {
width: 50px;
height: 50px;
border: 2px solid #000;
border-top-width: 1px;
border-right-width: 1px;
background-color: #fff;
font-size: 3em;
text-align: center;
cursor: pointer;
box-sizing: border-box;
position: absolute;
top: 0px;
right: 0px;
}
Login
Welcome to the Local jQuery User Group Website
Click the login button at the top of the page to login. To become a member please
Register
About this page layout:
The main container (parent) has 'relative' positioning so that the 'login' container can be absolutley positioned with respect
to that main container. Otherwise, it would default to being absolutley positioned with respect to the window.
In order for the login panel to be placed on top of the page we need to use absolute positioning, otherwise, it would move
the rest of the content down as done in the FAQ assignment. Technically, absolute positioning takes that
element out of the normal flow of the document, so that it is on top of the page. The 'ad' is also absolutely
positioned to the same main container.
This week's agenda:
There will be a live meeting this Tuesday evening from 7:00pm to 8:00pm PST using our WebEx Conferencing Software.
It will be recorded! Please note that the code samples will be available on our GitHub repository.
Copyright © Local jQuery User Group
X
This is add display here
$(document).ready(function(){
$("#ad").show();
$("#ad #adbtn").click(function(){
$("#ad").fadeOut();
});
$("#login").click(function(){
if($(this).hasClass("plus"))
$(this).removeClass("plus").addClass("minus");
else
$(this).removeClass("minus").addClass("plus");
$("#loginDiv form").fadeToggle();
})
});
Step by Step Solution
There are 3 Steps involved in it
Get step-by-step solutions from verified subject matter experts
