Develop Reference

jQuery div animate from left to right and comes back after pause

I'm trying to slide a div from the left to the right side when the 'submit' button is clicked. After a little pause, the div would automatically slides back to it's original position. Currently it goes to the right side but it isn't coming back to the left corner.
CSS
#mainform{
position: absolute;
display: block;
padding-top:20px;
font-family: 'Fauna One', serif;
}
HTML
<div id="mainform">
<!-- Required div starts here -->
<form id="form">
<h3>Contact Form</h3>
<div class="hello"></div>
<input type="button" id="submit" value="Send Message"/>
</form>
</div>
JS
$(document).ready(function() {
$('#submit').click(function(e) {
reslide();
function reslide() {
$('#mainform').delay().animate({width: '510px', left: '1050'}, 600).delay(5000).animate({width: '510px', right: '1000px'}, 200, function() {
setTimeout(reslide, 3000);
});
}
$('.hello').fadeIn(1500);
$("<b>Successfully send</b>").appendTo(".hello");
$('.hello').fadeOut(2500);
});
});

When you give feedback to the user after/before submiting, try to use CSS3 Transform instead of actually moving/resizing the object.
function slide($obj) { // jQuery object of element
$obj.css("transform", "translateX (50px)");
setTimeout(function(){
$obj.css("transform", "none");
}, 5000);
}
To make it smooth (real animation) apply CSS3 Transition property.
<style>
.object {
transition: transform 0.6s;
}
</style>
Or you can shorten, if you're sure everything'd go smoothly.
function slide($obj) { // jQuery object of element
$obj.animate("transform", "translateX (50px)")
.delay(600).
.animate("transform", "translateX (0px)");
}
PS; in my expirience jQuery.delay(); wasn't always working with queueing animations, i'm not entirely sure why. As a matter of fact, this happened only sometimes. Sometimes tought it wasn't working
// not working
$("smth").animate({"rule":"val"}).delay(500).animate("rule":"val");
// working
$("smth").animate({"rule":"val"})
setTimeout(function(){
$("smth").animate({"rule":"val"})
}, 1000);

The reason it's not working is that, while you add right to the element, you also keep left with its original value, thus the element will not "come back". Add left: '', to the 2nd animate function and you should be good to go:
function reslide() {
$('#mainform').delay().animate({
width: '510px',
left: '1050'
}, 600).delay(5000).animate({
width: '510px',
left: '',
right: '1000px'
}, 200, function () {
setTimeout(reslide, 3000);
});
}
Here is a fiddle you can play with: http://jsfiddle.net/bv8dwaq2/

How do you remove a <div> element using JavaScript

I have a html/JavaScript project that i am working on and i am encountering problems.
I am making a sign-up form for an email newsletter and i have it in a div element in the middle of a page like so:
(i know, its structure is really messed up but i am just playing around right now.)
<div id="overlay"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><center><div id="nothin" class="form">Sign Up For Our Newsletter<br><br>
<table><TD width="50%" valign="middle"><img class="round"src="picture1.jpg" height="150" width="250"></td><td width="5%"></td><td width="40%" valign="middle"><form>
<input type="text" class="round"required id="name" width="190"><br><br>
<input type="email" class="round"required id="email" width="190"><br><br>
<input id="submit"type="submit" class="button"value="Submit Your Email" onclick="success()"><br>
</form></td></table></div></center></div>
The problem i have is i made the script below so when you submit you get a success message and a button that should close down the div, leaving the webpage:
<script>
function success()
{
document.getElementById("nothin").innerHTML="<div id='form2'>Success!<br><br>Thank You!<br> You have successfully signed up for the Our newsletter!<br><button onclick='hide()' class='button'>Continue</button></div>";
}
</script>
When you click on the button "continue" it should run the function "hide()":
<script>
function hide()
{
document.getElementById("overlay").innerHTML="";
}
</script>
My problem is that when the "continue" button is clicked, it only closes <div id="nothin>
not "overlay" like it should. Do you have any idea why? Should i use some other method to close it?
Here is the CSS for the form, it wont work that well without it:
<style>
#overlay {
z-index: 16777271;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,.8);
}
.form, .form2{
background-color:white;
color:black;
width:500;
height:250;
align:center;
border-radius: 40px;
border:dashed darkgreen;
}
.round{
border-radius:8px;
}
.button{
background-color:green;
border-color:green;
border-radius:45px;
height: 40px;
width:190px;
}
.BUTTON:HOVER{
background-color:darkgreen;
border-color:darkgreen;
border-radius:45px;
}
</style>

In the hide() function you are making the contents of "#overlay" element empty while element itself, remains.
One solution can be hiding the element.
This should work -
function hide(){
document.getElementById("overlay").style.visibility = 'hidden';
/*
//or setting the display to none
document.getElementById("overlay").style.display = 'none';
*/
}

Suppose you have a html code like
<div id ='parentWow'>
<div id='ChildHello'>
Some Content
<div>
</div>
If you want to remove the child of id "ChildHello" from the parent, instead of just making their visibility "hidden", you can use the following javascript
document.getElementById("ChildHello").parentNode.removeChild(document.getElementById("ChildHello"))
This helps... (y)

Animate div back to its original position (cycle needs to be repeated)

I've the following HTML
<div id="mrdiv"/>
<input type="button" style="position: absolute;top: 100px;"onclick="one();"></input>
<input type="button" style="position: absolute;top: 100px; left: 50px;" onclick="two();"/>
JAVASCRIPT
function one(){
$("#mrdiv").stop(true).animate({right: "+=214"},200);
}
function two(){
$("#mrdiv").stop(true).animate({left: "+=214"},200);
}
CSS
#mrdiv{
position:absolute;
background-color: black;
width: 100px;
height: 100px;
}
Last but not least: http://jsfiddle.net/25pYY/3/
For some odd reason, I can't understand why the buttons don't work but I guess the code is enough to understand what I want.
Basically, when I execute the animate functions the div animate properly but only in the first passage to the code. With this I mean that If I click the button one then two won't work, or vice-versa. I need them both to work and to do this repeatdly but I don't understand why they wont. Any ideas on this one? Sorry for the broken fiddle, I'll try and get it to work while waiting!

Your right and left values are competing with each other. You need to disable them as appropriate:
http://jsfiddle.net/isherwood/25pYY/9
function one() {
$("#mrdiv").stop(true).animate({
right: "+=14"
}, 200).css('left', 'auto');
}
function two() {
$("#mrdiv").stop(true).animate({
left: "+=14"
}, 200).css('right', 'auto');
}
It would be a good move to get your click handlers out of your HTML, like so:
http://jsfiddle.net/isherwood/25pYY/10
$(function () {
$('#mrdiv input').click(function () {
if ($(this).index() == 1) {
one();
} else {
two();
}
});
});
As I suspected, you actually wanted different behavior than what your code would indicate. Here's how you might keep the animations from jumping to the sides of the screen. Only animate one property:
http://jsfiddle.net/isherwood/25pYY/12
function one() {
$("#mrdiv").stop(true).animate({
left: "-=14"
}, 200);
}
function two() {
$("#mrdiv").stop(true).animate({
left: "+=14"
}, 200);
}

jQuery to stop a function using click, that runs on doc ready - Then start function when clicked again

I have a page that has 2 functions that begin on document ready. One begins a slideshow of images fading in and out and another that slowly fades a background image in and out. I have implemented a switch that when clicked, fades in a new background image and overall background-color. I'm trying to figure out how to have this switch also stop the functions that are running on document ready (or disable them completely so the slides aren't sitting still) but also restart them when clicked again. So basically toggle the functions each time clicked. I mocked up a page that has images cycling and a button to change the image and background color (I left off the other function I mentioned to make it less complicated and more clean). Any assistance would be greatly appreciated.
I've looked into adding a global variable and then an if-statement for the functions and then have the click change that global to an invalid, then I tried looking into toggle-functions but had no luck. I'm fairly new to all of this so I apologize if my code is messy or confusing
http://jsfiddle.net/timtim123/d6xn8/2/
<body>
<img src="http://i1331.photobucket.com/albums/w600/timtim123454/background_zps3f866162.png" id="backimg" />
<div id="switch">
<img src="http://i1331.photobucket.com/albums/w600/timtim123454/darkswitch_zpsc7190818.png" width="46" height="275" border="0" />
</div>
<div class="fadein">
<img src="http://i1331.photobucket.com/albums/w600/timtim123454/slide1_zps169c4a26.png" width="394" height="630" border="0" />
<img src="http://i1331.photobucket.com/albums/w600/timtim123454/slide2_zps72fbcc61.png" width="394" height="630" border="0" />
<img src="http://i1331.photobucket.com/albums/w600/timtim123454/slide3_zpsaf2fb393.png" width="394" height="630" border="0" />
<img src="http://i1331.photobucket.com/albums/w600/timtim123454/slide4_zps9544ea88.png" width="394" height="630" border="0" />
</div>
</body>
body {
background:black;
transition:background 0.2s ease;
}
.clicked {
background:white;
}
#backimg {
position:absolute;
top: 0px;
left: 0px;
z-index: 2;
}
#backimg2 {
position:absolute;
top: 0px;
left: 0px;
z-index: 2;
}
#switch {
top: 0px;
left: 100px;
top: 300px;
height:275px;
position:absolute;
z-index: 7;
}
.fadein {
position:absolute;
width:500px;
height:630px;
top: 0px;
left: 500px;
}
.fadein img {
position:absolute;
top: 0px;
left: 500px;
}
//cycle through slides
$(document).ready(function cycle() {
timer = $('.fadein img:gt(0)').hide();
setInterval(function () {
$('.fadein :first-child').fadeOut(2000)
.next('img').fadeIn(2000)
.end().appendTo('.fadein');
}, 2000);
//switch functionality
$(document).ready(function () {
$("#switch").click(function () {
var src = $("#backimg").attr("src");
$("body").delay(2000).queue(function () {
$("body").toggleClass("clicked");
$("body").dequeue();
});
if (src == "http://i1331.photobucket.com/albums/w600/timtim123454/background_zps3f866162.png") {
$("#backimg").fadeOut(2000, (function () {
$("#backimg").fadeIn(2000).attr("src", "http://i1331.photobucket.com/albums/w600/timtim123454/background2_zps36c1126d.png");
}));
} else if (src == "http://i1331.photobucket.com/albums/w600/timtim123454/background2_zps36c1126d.png") {
$("#backimg").fadeOut(500, (function () {
$("#backimg").delay(5000).fadeIn(5000).attr("src", "http://i1331.photobucket.com/albums/w600/timtim123454/background_zps3f866162.png");
}));
}
});
});
});

1) Try doing it using clearInterval as in the example shown at the top of this page http://www.w3schools.com/jsref/met_win_clearinterval.asp. This will stop the setInterval function.
2) To hide your slideshow / image you will need to use jQuery hide. Stopping a function will not change elements in the DOM.
3) Here is an elaboration on the code in the link I sent you, that includes stop and start functionality.
<!DOCTYPE html>
<html>
<body>
<p>A script on this page starts this clock:</p>
<p id="demo"></p>
<button onclick="myStopFunction()">Stop time</button>
<button onclick="myStartFunction()">Stop time</button>
<script>
var myVar = setInterval(function(){myTimer()},1000);
function myTimer()
{
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
function myStopFunction()
{
clearInterval(myVar);
}
function myStartFunction()
{
myVar = setInterval(function(){myTimer()},1000);
}
</script>
</body>
</html>
Let me know if you need further information.
FYI - you don't need 2 '$(document).ready' Just put the code of the 2nd one under the code of the 1st one.

jQuery fade to new image

How can I fade one image into another with jquery? As far as I can tell you would use fadeOut, change the source with attr() and then fadeIn again. But this doesn't seem to work in order. I don't want to use a plugin because I expect to add quite a few alterations.
Thanks.

In the simplest case, you'll need to use a callback on the call to fadeOut().
Assuming an image tag already on the page:
<img id="image" src="http://sstatic.net/so/img/logo.png" />
You pass a function as the callback argument to fadeOut() that resets the src attribute and then fades back using fadeIn():
$("#image").fadeOut(function() {
$(this).load(function() { $(this).fadeIn(); });
$(this).attr("src", "http://sstatic.net/su/img/logo.png");
});
For animations in jQuery, callbacks are executed after the animation completes. This gives you the ability to chain animations sequentially. Note the call to load(). This makes sure the image is loaded before fading back in (Thanks to Y. Shoham).
Here's a working example

$("#main_image").fadeOut("slow",function(){
$("#main_image").load(function () { //avoiding blinking, wait until loaded
$("#main_image").fadeIn();
});
$("#main_image").attr("src","...");
});

Well, you can place the next image behind the current one, and fadeOut the current one so that it looks like as though it is fading into the next image.
When fading is done, you swap back the images. So roughly:
<style type="text/css">
.swappers{
position:absolute;
width:500px;
height:500px;
}
#currentimg{
z-index:999;
}
</style>
<div>
<img src="" alt="" id="currentimg" class="swappers">
<img src="" alt="" id="nextimg" class="swappers">
</div>
<script type="text/javascript">
function swap(newimg){
$('#nextimg').attr('src',newimg);
$('#currentimg').fadeOut(
'normal',
function(){
$(this).attr('src', $('#nextimg').attr('src')).fadeIn();
}
);
}
</script>

Are you sure you're using the callback you pass into fadeOut to change the source attr and then calling fadeIn? You can't call fadeOut, attr() and fadeIn sequentially. You must wait for fadeOut to complete...

Old question but I thought I'd throw in an answer. I use this for the large header image on a homepage. Works well by manipulating the z-index for the current and next images, shows the next image right under the current one, then fades the current one out.
CSS:
#jumbo-image-wrapper
{
width: 100%;
height: 650px;
position: relative;
}
.jumbo-image
{
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
HTML:
<div id="jumbo-image-wrapper">
<div class="jumbo-image" style="background-image: url('img/your-image.jpg');">
</div>
<div class="jumbo-image" style="background-image: url('img/your-image-2'); display: none;">
</div>
</div>
Javascript (jQuery):
function jumboScroll()
{
var num_images = $("#jumbo-image-wrapper").children(".jumbo-image").length;
var next_index = jumbo_index+1;
if (next_index == num_images)
{
next_index = 0;
}
$("#jumbo-image-wrapper").children(".jumbo-image").eq(jumbo_index).css("z-index", "10");
$("#jumbo-image-wrapper").children(".jumbo-image").eq(next_index).css("z-index", "9");
$("#jumbo-image-wrapper").children(".jumbo-image").eq(next_index).show();
$("#jumbo-image-wrapper").children(".jumbo-image").eq(jumbo_index).fadeOut("slow");
jumbo_index = next_index;
setTimeout(function(){
jumboScroll();
}, 7000);
}
It will work no matter how many "slides" with class .jumbo-image are in the #jumbo-image-wrapper div.

For those who want the image to scale according to width percentage (which scale according to your browser width), obviously you don't want to set height and width in PIXEL in CSS.
This is not the best way, but I don't want to use any of the JS plugin.
So what can you do is:
Create one same size transparent PNG and put an ID to it as
second-banner
Name your original image as first-banner
Put both of them under a DIV
Here is the CSS structure for your reference:
.design-banner {
position: relative;
width: 100%;
#first-banner {
position: absolute;
width: 100%;
}
#second-banner {
position: relative;
width: 100%;
}
}
Then, you can safely fade out your original banner without the content which placed after your image moving and blinking up and down