Develop Reference

Jquery Animate lasting for certain amount of time

I am trying to have jQuery animate function only last for a couple seconds and the revert back to the original item.
<button id="clickMe"> Click </button>
<div id="target"> Target </div>
and the Jquery:
$(document).ready(function(){
$('#clickMe').click(function(){
$('#target').animate({opacity: 0.1}, 'slow');
});
});
How would I make this effect only last for say two seconds? Thanks

This help you :
<script>
$(document).ready(function(){
$('#clickMe').click(function(){
$('#target').animate({opacity: 0.1}, 2000).animate({opacity: 1});
});
});
</script>

You can do it by setting a time duration like this :
$(document).ready(function() {
$('#clickMe').click(function() {
$('#target').animate({
opacity: 0.1
}, 2000, function() {
$('#target').animate({
opacity: 1
})
});
});
});
Here is the jsFiddle
Hope it helps :)

you can use duration and complete options of animate
$('#clickMe').click(function(){
$('#target').animate(
{opacity: 0.1},
{
duration: 2000,complete: function(){
$('#target').css("opacity", 1);
}});
});
plunker : http://plnkr.co/edit/d3135325X3R9QkzZjdbz?p=preview

This help you:
$( "#target" ).animate({ opacity: 0.1 }, 2000, function() {
// Revert back.
});

Time jquery function

I have this code below where I want when I click the button, it will wait about 3 seconds to repeat the action.
The code is this:
$( ".menu-show").css({ "visibility":"hidden", "opacity":"0" }),
$( "#bt_web" ).hover(function() {
$( ".menu-show").css({ "visibility":"visible"}),
$( ".menu-show").animate({opacity: 1}, 500);
}, function() {
$( ".menu-show").css({ "visibility":"hidden"}),
$( ".menu-show" ).animate({opacity: 0}, 300);
});
$( "#bt_web" ).hover(function() {
$(this).animate({opacity: 0.2}, 500);
}, function() {
$(this).animate({opacity: 1}, 300);
});
Is there any function in jquery that makes it similar like "setTimeout" of action script?
thank you

Yes, you can use .delay() which delays in milliseconds the function.
An example would be:
$("#id").delay(600).fadeOut();
This would wait 600 milliseconds and then fadeOut().
(If this was what you were talking about)

marginLeft as a Javascript variable

I'm trying to animate a 'div' in the mobile version of my website.
$(function(){
$( "#iconReorder" ).bind( "tap", tapHandler );
function tapHandler( event ){
$( "#iconReorder" ).animate({
marginLeft: "15px"
}, 500 );
}
});
When the 'div' wil change position I'd like to be able to tap once again on it and let it return to its default position.
I tried to create an 'if' statement...but I can't understand why it doesn't work.
I'd like assume the 'marginLeft' of my 'div' as a variable for my javascript code in order to move it to the right if 'marginLeft=10px' and move it to the left (default position) if the "new" 'marginLeft is not equal to 10px anymore.
I've tried with the following code:
var x = ("#iconReorder").style.marginLeft;
if (x = "10px") {
$(function(){
$( "#iconReorder" ).bind( "tap", tapHandler );
function tapHandler( event ){
$( "#iconReorder" ).animate({
marginLeft: "15px"
}, 500 );
}
});
} else {
$(function(){
$( "#iconReorder" ).bind( "tap", tapHandler );
function tapHandler( event ){
$( "#iconReorder" ).animate({
marginLeft: "10px"
}, 1000 );
}
});
}
Can somebody help me?
I hope that what I said is understandable.
Thank you

So if I understood correctly, this should do:
var x = $("#iconReorder");
x.on('tap', function () {
var to = '10px', time = 1000;
if (x.css('margin-left') === '10px') {
to = '15px';
time = 500;
}
x.animate({
marginLeft: to
}, time);
});
or in action. I replaced tap event with click so that I could see what I'm doing. Anyway it should work better now.
There might be some slimmer way to make it work, but I can't think of any at the moment (maybe some toggle method).

try this
$( "#iconReorder" ).animate({
'margin-left': 15
}, 500 );

How do I prevent a javascript function from rendering before another function rendering?

Theoretically speaking let's say I have 3 javascript (jquery) functions that create visual effects. If I want one of them to render after the first two have been rendered, how can I do this?
Javascript:
<script type="text/javascript">
$(function() {
var transition = 'slow';
var target1 = $('#somediv');
var target2 = $('#second_div');
var target3 = $('#third_div');
target1.delay(5000).fadeIn();
target2.delay(target2Time).fadeIn();
target3.delay(target3Time).fadeIn();
});
</script>
<script type="text/javascript">
$.fn.teletype = function(opts){
var $this = this,
defaults = {
animDelay: 50
},
settings = $.extend(defaults, opts);
$.each(settings.text, function(i, letter){
setTimeout(function(){
$this.html($this.html() + letter);
}, settings.animDelay * i);
});
};
$(function(){
$('#second_div').teletype({
animDelay: 200,
text: 'Hello, this is your classmate!'
});
});
</script>
HTML:
<div id="somediv">Some Content</div>
<div id="second_div"></div>
<div id="third_div">Some third content</div>

I've made this demo. It demonstrates how to make one animation wait for two other animations to finish:
var anim1 = $( '#elem1' ).animate({ width: 200 }, 3000 );
var anim2 = $( '#elem2' ).animate({ width: 200 }, 2000 );
$.when( anim1, anim2 ).done(function () {
$( '#elem3' ).animate({ width: 200 }, 1000 );
});
Live demo: http://jsfiddle.net/m67Ua/
You can apply the same technique for your fading requirements:
var fade1 = $( '#img1' ).fadeIn( 3000 );
var fade2 = $( '#img2' ).fadeIn( 2000 );
$.when( fade1, fade2 ).done(function () {
$( '#img3' ).fadeIn( 1000 );
});
Live demo: http://jsfiddle.net/m67Ua/1/

Just as improvement, you can pass an array of animations
var array = new Array();
array.push( $( '#img1' ).fadeIn( 3000 ));
array.push( $( '#img2' ).fadeIn( 2000 ));
And then the trick is change from array to list arguments as expected by jquery, using the apply method
$.when.apply(this, array ).done(function () {
$( '#img3' ).fadeIn( 1000 );
});
Live demo:
http://jsfiddle.net/m67Ua/2/

i needed the callbacks and the done, so check this out:
$.when(
$('#container .item')
.animate({"opacity": "0"}, 1000,
function onCallbackForEach () {
console.log('callback on element called');
})
).done( function onFinally () {
console.log('done called');
});
which gives me access to handle the elements each after their animation (e.g. replace an old one with them), and aditionally having a single callback to do work after all of the animations have finished...

jQuery: Can't get .click to work on a div? Newbie?

This is my first time really trying to use jQuery for my personal portfolio and I'm having some problems with it. I want it to have a grid of small images (.piece) that when clicked slides to the left and presents a single large piece (#largeview). Then when you click (#largeview) it should slide away, and show (.piece) again!
See what I'm doing here.
The code works up to:
$("#largeview").click(function(){
$("#largeview").animate({
opacity: 0,
right: "-1000",
So I believe it's the .click that's not catching. Is there any reason for this? This is even with height/width defined in the CSS.
This is the whole block:
$(".piece").click(function(){
$(".piece").animate({
opacity: 0,
right: "+=1000",
}, 1000, function(){
$(".piece").hide();
$("#largeview").show();
$("#largeview").animate({
opacity: 1,
right: "0",
}, 500, function(){
$("#largeview .exit").fadeOut("slow");
$("#largeview").click(function(){
$("#largeview").animate({
opacity: 0,
right: "-1000",
}, 500, function(){
$("#largeview").hide();
$(".piece").show();
$(".piece").animate({
opacity: 1,
right: "0",
}, 1000, function(){
//done
});
});
});
});
});
});
Thank you to everyone!

The reason is that #largeview is not receiving the click event, it has a z-index of -1 in your CSS on your website. This means that the click event pops up to the its parent and never fires with a target of #largeview. If you change the z-index to 4 for instance, you'll notice that your page works correctly.
If you have a reason to keep #largeview with z-index: -1 in the CSS, change it when it gets popped in so that it will receive the click event.
Extra-tip: To check which element was the target of the click event, I added the following to your javascript and watched the page title as I clicked:
$('*').click(function (e) {
document.title = e.target.tagName + '#' + e.target.id + '.' + e.target.className;
});

Doe this work for you:
$(".piece").click(function(){
$(this).animate({
opacity: 0,
right: "+=1000",
}, 1000, function(){
$(this).hide();
$("#largeview").animate({
opacity: 1,
right: "0",
}, 500, function(){
$("#largeview .exit").fadeOut("slow");
}).show();
});
});
$("#largeview").click(function(){
$(this).animate({
opacity: 0,
right: "-1000",
}, 500, function(){
$(this).hide();
$(".piece").animate({
opacity: 1,
right: "0",
}, 1000, function(){
//done
}).show();
});
});

I think the problem is in the CSS. Having removed z-index: -1 from #largeview, I get all clicks captured. Try to either modify common.css (which is preferrable) or edit the code by Sudhir to (EDITED a bit):
var $pieces = $('.piece'),
$largeview = $('#largeview');
$pieces.click(function(){
$pieces.animate({
opacity: 0,
right: '-1000px',
}, 1000, function() {
$largeview.show()
.animate({
opacity: 1,
right: '0',
}, 500, function() {
$largeview.find('.exit').fadeOut('slow');
});
}).hide();
});
$largeview.click(function(){
$largeview.animate({
opacity: 0,
right: '1000px'
}, 500, function(){
$pieces.show()
.animate({
opacity: 1,
right: '0'
}, 1000);
})
.hide();
});