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/
Related
I am trying to use jQuery slide-in animation and it seems to work fine, but my the second animation doesn't work. Can anyone tell me what I am doing wrong?
This line:
$('#headline1Txt').animate({'marginLeft': "100px"}, 1000);
is working fine, but this one:
$("#headline1Txt").animate({left: "+=30"}, 500);
is not working.
My Code
HTML
<div id="mainContainer">
<div id="headlineText">
<p id="headline1Txt" >Striped Bag</p>
</div>
</div>
JS
$(document).ready(function () {
$('#headline1Txt').animate({'marginLeft': "100px"}, 1000);
$("#headline1Txt").animate({left: "+=30"}, 500);
});
CSS
#headlineText {
margin: 60px 80px;
}
The left CSS property specifies part of the position of positioned
elements.
For absolutely positioned elements (those with position: absolute or position: fixed), it specifies the distance between the left margin
edge of the element and the left edge of its containing block.
https://developer.mozilla.org/en-US/docs/Web/CSS/left
As the CSS left property is part of position:*; property's, fix by adding the position property, so jquery knows what to increment a left value to.
In Action
CSS
#headlineText
{
margin:60px 80px;
}
#headline1Txt
{
position:relative;
}
HTML
<div id="mainContainer">
<div id="headlineText">
<p id="headline1Txt">Striped Bag</p>
</div>
</div>
jQuery
$(document).ready(function () {
$('#headline1Txt').
animate({ 'marginLeft': "100px" }, 1000).
animate({ left:"+=30" }, 5000);
});
What are you trying to achieve?
You want the text to slide in (heading right across the screen) then slide another 30px?
Thats what $("#headline1Txt").animate({ 'marginLeft': "+=30" }, 500); will achieve.
'marginLeft' not just left.
The left property of css only works with elements with absolute position. To make your animation work you have to put you element at absolute position.
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);
}
I'm using jquery in my webpage but fadeIn and fadeOut doesn't work after the first two times. i had tried with show(500,...), hide and animate, with easing and without it, but it behaves the same.
here is one of the div's i want to fadeIn
<div id="rfcdiv" style="position: absolute; display: none" >
<img alt="Ticket" src="images/DATOSfiscales.png" style="position:absolute;width:fit-content;left:0px;top:230px;z-index:18"></img>
<div id="text1" style="position:absolute; overflow:hidden; left:45px; top:341px; width:37px; height:21px; z-index:20"><div class="wpmd"><div><font face="Myriad Pro Light"><B>RFC:</B></font></div></div></div>
<input name="RFC" id="RFC" type="text" maxlength=13 value="<?php if (isset($_GET['rfc'])){echo $_GET['rfc'];}?>" style="position:absolute;width:276px;left:79px;top:340px;z-index:13">
<div id="ValidacionRfc" style="position:absolute; overflow:hidden; left:360px; top:341px;width: fit-content;height: fit-content;z-index:14;display: none" onmouseover="mostrarglobo(1)" onmouseout="mostrarglobo(0)"></div>
here is the code that shows it:
$("#image1").animate({ height: "450px" }, 800, function () {
$("#ingresarfolio").animate({ top: "170px" }, 800, function () {
$('#rfcdiv').fadeIn(500, function () {
recheck_ticket(1);
});
});
});
you can try here: MyPage
(just pressing Enter on the textbox)
//apologize about my english
edit:
When the page loads it fades in correctly, if you put a leter on the textbox it will fadein an icon correctly but when you only press enter it will just appear after a time.
Sorry, i cant show the code correctly so the code is the first commented code in MyPage
In you script (facturar.js)
the fadeIn syntax is
$('#rfcdiv').fadeIn(function () {
recheck_ticket(1);
}, 2000);
try changing it to
$('#rfcdiv').fadeIn(2000, function () {
recheck_ticket(1);
});
Refer .fadeIn()
Then,
Remove position:absolute from all components inside #rfcdiv and let them placed in document flow.
and position #rfcdiv whereever you want by applying position:absolute, top and left to it.
like this
#rfcdiv {
display: none;
position: absolute;
top: 150px;
z-index: 999;
left: 10px;
}
From my first look without going to your website, your timing is incorrect. See edit below.
$('#rfcdiv').fadeIn(function () {
recheck_ticket(1);
}, 500);
I've asked this guestion before. But now I'll try to be a bit more specific.
I've trying to make a background fade in when you mouse over a box. I've tried 2 different options.
Option 1:
Box1 is the box it mousesover, and hover1 is the new background that comes in. This actually works pretty well. However, it loads the acript, meaning, that if i just go crazy with my mouse over the box, the fadeing will continue endless, even when my mouse is standing still. Is there a way you can stop it?
Content is a text that changes in a contentbox when I mouseover. This worksfine.
$("#box1").mouseover(function(){
$("#background").switchClass("nohover", "hover1", 500);
$("#content").html(box1);
});
$("#box1").mouseout(function(){
$("#background").switchClass("hover1", "nohover", 150);
$("#content").html(content);
});
Option 2:
Here i add the class hover2 and asks it to fadeín and fadeout. But this doesn't work at all. Somtimes it even removes everything on the side when i take the mouseout of the box.
$("#box2").mouseover(function(){
$("#background").addClass("hover2").fadeIn("slow")
$("#content").html(box3);
});
$("#box2").mouseout(function(){
$("#background").removeClass("hover2").fadeOut("slow")
$("#content").html(content);
});
I Use jquery ui.
I really hope someone can help me!
You can also try to make small changes in the markup/CSS.
HTML:
<div id="box">
<div id="background"></div>
<div id="content"></div>
</div>
CSS:
#box {
position: relative;
/* ... */
}
#background {
position: absolute;
display: none;
top: 0;
left: 0;
width: inherit;
height: inherit;
background-image: url(...);
z-index: -1;
}
JavaScript:
$("#box").hover(function() {
$("#background").fadeIn();
}, function() {
$("#background").stop().fadeOut();
});
DEMO: http://jsfiddle.net/bRfMy/
Try add a variable to control the execution of the effect only when that variable has a certain value. And modify its value when the effect was executwed.
Something like this:
var goeft = 0;
$("#box1").mouseover(function(){
if(goeft == 0) {
$("#background").switchClass("nohover", "hover1", 500);
$("#content").html(box1);
goeft = 1;
}
});
$("#box1").mouseout(function(){
$("#background").switchClass("hover1", "nohover", 150);
$("#content").html(content);
// sets its value back to 0 if you want the next mouseover execute the effect again
goeft = 0;
});
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