We Keep Coding

Combine the use of velocity.js' slideUp and begin: function

How do you combine these two, so that one can slide an item up, but trigger some JS just as that animation starts.
SlideUp code
.velocity("slideUp", { delay: 500, duration: 1500 });
Begin: code
$element.velocity({
opacity: 0
}, {
/* Log all the animated divs. */
begin: function(elements) { console.log(elements); }
});
Doing something like this doesn't work.
.velocity("slideUp", { delay: 500, duration: 1500 }), {
/* Log all the animated divs. */
begin: function(elements) { console.log(elements); }
});

You have to put thebegin property inside the options object:
.velocity("slideUp", {
delay: 500, duration: 150,
begin: function(elements) { console.log(elements); }
});

Animating several elements at the same time?

I saw another post on here saying this would work - and it's definitely not. Wondering why these are not all executing at once?
I am simply trying to get the top and opacity animations to happen at once. Here's a fiddle: http://jsfiddle.net/DU8N2/
$(".wordcar").animate({
top:"32px"
}, { duration: 2000, queue: false });
$(".wordcar li.next").animate({
opacity:"1"
}, { duration: 2000, queue: false });
$(".wordcar li.current").animate({
opacity:"0.2"
}, { duration: 2000, queue: false });
$(".wordcar li.ondeck").animate({
opacity:"0.2"
}, { duration: 2000, queue: false });
$(".wordcar li.previous").animate({
opacity:"0.0"
}, { duration: 2000, queue: false });

It's not in a queue. Try setting the fade animations duration: 1000, instead of 2000 and there you have your magic.

Lof JSliderNews jQuery - how to pause on hover?

jQuery(function($) {
var buttons = {
previous: jQuery('#lofslidecontent45 .lof-previous'),
next: jQuery('#lofslidecontent45 .lof-next')
};
window.setTimeout(function(){
$obj = jQuery('#lofslidecontent45').lofJSidernews({
interval: 4000,
direction: 'opacitys',
easing: 'easeInOutExpo',
duration: 1200,
auto: true,
maxItemDisplay: 3,
navPosition: 'horizontal', // horizontal
navigatorHeight: 40,
navigatorWidth: 70,
mainWidth: 1000,
buttons: buttons,
isPreloaded:false
});
},500);
});
How to configure pause on hover?
is there any reference for this slider?
or is there any option like hover: stop?

there is no such config like hover: "stop".
But if you look in the actual .js file, you will find
$( obj ).hover(function(){
self.stop();
$buttonControl.addClass("action-start").removeClass("action-stop").addClass("hover-stop");
}, function(){
if( $buttonControl.hasClass("hover-stop") ){
if( self.settings.auto ){
$buttonControl.removeClass("action-start").removeClass("hover-stop").addClass("action-stop");
self.play( self.settings.interval,'next', true );
}
}
} );
That means, hover stop functionality is default there.

jquery animation - when do they finish?

I have two jquery animations one by other:
books.animate({ left: left1 }, {
duration: this.slideDuration,
easing: this.easing,
complete: complete
});
laptops.animate({ left: left2 }, {
duration: this.slideDuration,
easing: this.easing,
complete: complete
});
I want the animations to run simultanusly so I use {queue: false}:
books.animate({ left: left1 }, {
duration: this.slideDuration,
easing: this.easing,
queue: false,
complete: complete
});
laptops.animate({ left: left2 }, {
duration: this.slideDuration,
easing: this.easing,
queue: false,
complete: complete
});
But now the completed callback called twice! How can I know exactly when does the both animations are done?

Using jQuery deferred methods try
$.when(
books.animate({ left: left1 }, {
duration: this.slideDuration,
easing: this.easing
}),
laptops.animate({ left: left2 }, {
duration: this.slideDuration,
easing: this.easing
})
).done( function( ) {
alert("done!");
});
Fiddle here

Why not remove the complete handler from one of the animations?
From the extract of code that you've posted, it looks as though you're using the same duration and easing methods on both animations. Therefore it's inherently true that they will complete at the same time, so long as they're being called at the same time...

this may sounds like something complicated, but why not Deferred Objects ?
http://api.jquery.com/category/deferred-object/
you may investigate more here
jQuery animation with deferred pipes?

According to http://darcyclarke.me/development/using-jquery-deferreds-with-animations/:
books.animate({ left: left1 }, {
duration: this.slideDuration,
easing: this.easing,
queue: false
});
laptops.animate({ left: left2 }, {
duration: this.slideDuration,
easing: this.easing,
queue: false
});
$.when(books, laptops).done(complete);

How can I make this a better recursive animated jQuery script?

The idea is to animate a cloud div and to have it animate back and forth horizontally in perpetuity. This works, but unfortunately I think it's prone to memory leaks and UI lag. Any advice would be appreciate, thanks.
function animateCloud() {
$('#cloud').animate({ right: '+=500' }, { duration: 35000, easing: "linear", queue: true });
animateOpposite();
}
function animateOpposite() {
$('#cloud').animate({ right: '-=500' }, { duration: 35000, easing: "linear", queue: true });
animateCloud();
}
$(document).ready(function() {
animateCloud();
});

I don't think that your code leaks memory at all, but you can create the call shorter.
function animateCloud() {
$('#cloud').animate({ right: '+=500' }, { duration: 35000, easing: "linear" })
.animate({ right: '-=500' }, { duration: 35000, easing: "linear", complete: animateCloud });
}
example: http://www.jsfiddle.net/bh3f4/

http://api.jquery.com/animate/
Use the optional callback argument. When an animation finishes, jquery will call your function. Perfect time to animate other direction.