Develop Reference

Velocity.js: Animate second set of objects after first set finishes

I'm trying to animate a series of SVG objects. Here's the basic goal: The first set of 4 objects animates in, then out, and then the next set of objects animate in. While the first 2 queue up just fine, I'm not sure of the best method to get the second set to wait until the first set finishes.
Here's my code:
JS:
$( document ).ready(function() {
$('.dt0,.dt1,.dt2,.dt3').velocity("transition.perspectiveRightIn", {stagger: 200, drag: true });
$('.dt0,.dt1,.dt2,.dt3').velocity("transition.perspectiveRightOut", {stagger: 200, drag: true });
$('.tr0,.tr1,.tr2,.tr3').velocity("transition.perspectiveRightIn", {stagger: 200, drag: true });
})
UPDATE: Here's my solution, but I'm bothered by utilizing a delay rather than a queuing method.
$( document ).ready(function() {
$('.dt0,.dt1,.dt2,.dt3').velocity("transition.expandIn", {stagger: 200, drag: true });
$('.dt0,.dt1,.dt2,.dt3').velocity("transition.expandOut", {stagger: 200, drag: true, delay: 1000 });
$('.tr0,.tr1,.tr2,.tr3').velocity({opacity: 0}, {duration:0 });
$('.tr0,.tr1,.tr2,.tr3').velocity("transition.expandIn", {stagger: 200, drag: true, delay: 3000 });
})

Use the callbacks?
$('.dt0').velocity({
opacity: 0 //or animation name
}, {
complete: function(elements) {
$('.dt1').velocity({
opacity: 0 //or animation name
}, {
complete: function(elements) {
//... the others
},{duration:200, delay:2000 } //2s delay
});
},{duration:1000 }
});

jQuery animate not firing callback function

I have the following jQuery animate function:
$myDiv.animate({ "left": "0%" }, { duration: 1000, easing: 'easeInOutExpo' },
function () {
alert('hi');
}
);
The animation itself works. $myDiv slides with the easeInOutExpo effect, as desired. However, the callback function is never fired. To test it, I changed the callback to just alert("hi");, as you can see above. Still doesn't work.
What could I be doing wrong?

Try this
Demo: jsFiddle
$("#myDiv").animate({ "left": "0%" }, { duration: 1000, easing: 'easeInOutExpo' ,
complete:function () {
alert('hi');
}
}
);

There are a couple of things that need fixing here:
Make sure you've included jQuery UI in your code, because easeInOutExpo is not part of the standard jQuery library.
Your syntax is wrong: you're mixing up the two different options for the animate() function.
It's either
$(element).animate(properties [,duration] [,easing] [,complete]);
or
$(element).animate(properties, options)
where options is an object formatted like this:
{
duration: number,
easing: string,
complete: function,
}
You've gone with the second option, so you need to format it properly to use the complete attribute of the options object for your function:
$myDiv.animate({
"left": "0%",
}, {
duration: 1000,
easing: "easeInOutExpo",
complete: function () {
alert('hi');
},
});
Demo
Alternatively, you could use the first format option:
$("#myDiv").animate({
"left": "0%",
}, 1000, "easeInOutExpo", function () {
alert('hi');
});
Demo

One way is use of JQuery Promise
$myDiv.animate({ "left": "0%" }, { duration: 1000, easing: 'easeInOutExpo' }).promise().done(function(){
alert('hi done');
});

Push content javascript content

How can i push my content the same as another content? OK i know the question seems kind of vague but what I want to do is push my content like the way another script is pushing its content. What is doing when clicking the button it will push the content from the side causing the div to contract. I am not too far so maybe somebody can help. This is the script that works:
$(function(){
var $trigger = $(".icon-menu-2");
var $menu = $(".c_left");
$trigger.toggle(function show() {
$menu.animate({ width: 185, marginLeft: 0, display: 'toggle'}, 'slow');
$(".c_right").animate({ marginLeft:185, display:'toggle'}, 'slow');
}, function hide() {
$menu.animate({ marginLeft: -185, display: 'toggle'}, 'slow');
$(".c_right").animate({ marginLeft:0, display:'toggle'}, 'slow');
});
})
http://jsfiddle.net/Ndvbn/2/
Here is the script that needs just a small touch up so that it will push the content just like the script above does when clicking on test. Here is the script:
var timer;
$("#slideout").animate({right:'0px', queue: false, duration: "slow"}, function () {
timer = setTimeout(function () {
$("#slideout").animate({right:'-280px'}, {queue: false, duration: "slow"})
}, 500);
});
$("#clickme2").click(function () {
if ($("#slideout").css("right") == "-280px"){
$("#slideout").animate({right:'0px'}, {queue: false, duration: 500}, function () {
clearTimeout(timer);
});
} else {
$("#slideout").animate({right:'-280px'}, {queue: false, duration: 500}, function () {
clearTimeout(timer);
});}
});
http://jsfiddle.net/5UpHk/4/
Can anybody post the code so that my second script will push the content to the left?

This script below will push the content to the left. I made a couple of changes to the CSS as well. Check out the demo and code here: http://jsfiddle.net/BdKhW/1/
var timer;
$("#slideout").animate({width:'275px'}, {queue: false, duration: "slow"}, function () {
timer = setTimeout(function () {
$("#slideout").animate({width:0}, {queue: false, duration: "slow"})
$(".c_left").animate({marginRight:0}, {queue: false, duration: "slow"})
}, 2000);
});
$(".c_left").animate({marginRight:'275px'}, {queue: false, duration: "slow"})
$("#clickme2").click(function () {
$("#slideout").animate({width:0}, {queue: false, duration: "slow"})
$(".c_left").animate({marginRight:0}, {queue: false, duration: "slow"})
});

jQuery .attr() not work on jQuery.dialog

I've HTML tag like this:
<div id="user-detail"></div>
That's for jQuery.dialog container. And the dialog script...
$('#user-detail').dialog({
autoOpen: false,
width: 700,
show: {
effect: 'fade',
duration: 500
},
hide: {
effect: 'slide',
duration: 500
}
});
When I call a function to show it, I adding .attr() to give the tag new attribute title.
function user_detail(id){
var output = call_ajax('/customer/ajax_get_detail', 'id=' + id);
$('#user-detail').attr('title', 'User Detail')
.dialog('close')
.html(output)
.dialog('open');
}
and blah.... the .attr() not work. What is the problem??

You can hack it like that:
$("span.ui-dialog-title").text('User Detail');

If User Detail string is common for all,Do not mess up.
use
<div id="user-detail" title="User Details"></div>

Your script is working fine here http://jsfiddle.net/yeyene/GnpQ8/3/
Make sure your variable output has data.
$(document).ready(function(){
$('#user-detail').dialog({
autoOpen: false,
width: 700,
show: {
effect: 'fade',
duration: 500
},
hide: {
effect: 'slide',
duration: 500
}
});
$('#user-detail').attr('title', 'User Detail')
.dialog('close')
.html('HI, I am a dialog.')
.dialog('open');
});

How to pass $(this) reference to a call back function?

I have the following animations in my web page:
$(".anim-item").not(this).animate({
opacity: 0,
}, { queue: true, duration: 1000 } , function() {
// Animation complete.
});
$(this).animate({
left: 200,
}, { queue: true, duration: 1000 } , function() {
// Animation complete.
});
Currently both the animations are running simultaneously. I want the second animation to run after the first one. I tried putting the second one inside the callback function, but cannot find a way to get the $(this) reference working. Any idea how to get this working?
Thanks in advance.

Your function is wrong, if you are declaring options, then the callback goes in the options object:
$(".anim-item").animate({
opacity: 1,
}, {duration: 1000, queue: true, complete: function() {
$(this).animate({
left: 200,
}, { queue: true, duration: 1000, complete: function() {
// Animation complete.
}});
}});
Also, don't make a global variable containing the item, that's just asking for trouble, especially as jquery will maintain it for you in this instance, if you need to declare a new variable for the object in chaining, generally you are not doing it right ;)

Two ways:
cache this in a local variable before calling .animate()
use .proxy() to pass your this reference to .animate()
example 1:
var func = function(){
var self = this;
$(".anim-item").not(this).animate({
opacity: 0,
}, { queue: true, duration: 1000 } , function() {
self.animate({});
});
};
example 2:
var func = function(){
$.proxy($(".anim-item").not(this).animate({
}), this);
};

Save it under a different name, like this:
var myThis = this;
$(".anim-item").not(this).animate({
opacity: 0,
}, { queue: true, duration: 1000 } , function() {
$(myThis).animate({
left: 200,
}, { queue: true, duration: 1000 } , function() {
// Animation complete.
});
});
The closure of the inner function will make sure it's visible.

Make an alias for this via
var _this = this;
If you write a jQuery query $('.abc') and use functions like click, hover etc, this will always reference to current DOM node jQuery is processing.

Store this in a local variable.
var _this = this;
$(".anim-item").not(this).animate({
opacity: 0,
}, { queue: true, duration: 1000 } , function() {
// Animation complete. Next animation
$(_this).animate({
left: 200,
}, { queue: true, duration: 1000 } , function() {
// Animation complete.
});
}
);

In a jQuery callback function this is always set to the DOM element that the function applies to.
If you want access to this in your first callback function you'll have to create a reference to it before you animate:
var self = this;
$(".anim-item").not(this).animate({
opacity: 0,
}, { queue: true, duration: 1000 } , function() {
$(self).animate({
left: 200,
}, { queue: true, duration: 1000 } , function() {
// Animation complete.
});
});