We Keep Coding

jQuery Chaining animation one after another

I am using the following functions to grow the text box and display the submit button on focus and shrink and hide the button on blur.
But the button shows and hides before the animation is complete.
I am looking to create a neat slide down and slide up animation.
$('#venue-write-review').focus(function() {
$(this).animate({ height: '96px' }, 500);
$('#submit-review').show();
});
$('#venue-write-review').blur(function() {
$(this).animate({ height: '48px' }, 500);
$('#submit-review').hide();
});

You can specify a callback to the animate function to be executed once the animation is done.
$('#venue-write-review')
.focus(function() {
$(this).animate({ height: '96px' }, 500, function () {
$('#submit-review').show();
});
})
.blur(function() {
$(this).animate({ height: '48px' }, 500, function () {
$('#submit-review').hide();
});
});

This is all you need And don't forget to use .stop()!
$('#venue-write-review').on('focus blur',function(e){
$(this).stop().animate({ height: e.type[0]=="f"?96:48 }, 500, function(){
$('#submit-review').toggle();
});
});
e.type[0]=="f" ij just to check in a Conditional Operator (?:) if the passed event's first [0] character is f (focus; else logically it's blur)
Read the jQuery docs about the methods: .on(), .toggle(), stop() .animate() callback and on the MDN website read about Conditional operator
Also in jQuery if you don't need to animate by % or some other measure, you don't need to specify 'px' cause it's default.

You can use complete callback. Check the docs (under options section):
A function to call once the animation is complete.
Like this:
$('#venue-write-review').focus(function() {
$(this).animate({
height: '96px'
},
{
duration: 500,
complete: function() {
$('#submit-review').show();
}
}
});
});
$('#venue-write-review').blur(function() {
$(this).animate({
height: '48px'
},
{
duration: 500,
complete: function() {
$('#submit-review').hide();
}
}
});
});

jquery animate lag issue

I have a contentSlider with width 200% and i am trying to use .animate to slide the content left and right. But during animation, there is some degree of lag. Here is my animate code.
$("#contentSlider").stop().animate({
left: "-100%"
},{
duration: 1000,
easing: "linear",
complete: function(){
$("#"+page).remove();
$('#contentSlider').css('left', '0px');
pageID = clickedID;
page = pageName;
if($("#audioControl").hasClass('audio')){
enableCowSound();
}else{
$(".moosound").off('hover');
}
$(container).removeClass('animating');
}
});
Appreciate any help!

I want to move button left-right and right-left using jquery

I am able to move button to left side but after that how i can again move it to right side.
Can i also use delay here.
Here is the code that i have tried:
$(document).ready(function () {
example_animate(10);
});
function example_animate(px) {
$('#Button1').animate({
'marginLeft': px
});
}

you can use this, it is working perfectly for me, it will continuously move your element back and forth, and you can also vary animation speed.
function animatethis(targetElement, speed) {
$(targetElement).animate({ marginLeft: "+=10px" },
{
duration: speed,
complete: function () {
targetElement.animate({ marginLeft: "-=10px" },
{
duration: speed,
complete: function () {
animatethis(targetElement, speed);
}
});
}
)};
}
use this to implement:
animatethis($('#controlid'), 1500);

Cannot answer properly without looking at your HTML and CSS but what you are doing is right. Simply call your example_animate() with a negative value
i.e.
example_animate(-10);
Or if you want to bring it to the original value (assuming originally it had 0 margin)
example_animate(0);
Note: This is probably not the best way to animate

Yes, the animate function takes a function that is called after the animation is complete. So you can do:
$(document).ready(function () {
example_animate(100);
});
function example_animate(px) {
$('#Button1').animate({
'marginLeft': px
}, function(){
$('#Button1').animate({
'marginLeft': 1
});
});
}
http://jsbin.com/ixajol/1/edit

Do execly the same only to the right, Its not that hard if you can make it go left.

Maybe
var button_init_marginLeft;
$(document).ready(function () {
button_init_marginLeft = $('#Button1').css("marginLeft");
example_animate(10, true);
example_animate(null, false);
});
function example_animate(px, to_left) {
if (to_left)
{
$('#Button1').animate({
'marginLeft': px
});
}
else
{
$('#Button1').animate({
'marginLeft': button_init_marginLeft
});
}
}
?

jQuery UI Bounce for progress bar

How would i add jQuery's UI Bounce feature to this script? The script currently slides out a progress bar to a set position. I would like that when it reaches the position it bounces back and forth a few times and then rests.
I tried a few previous stack overflow answers but none of them work.
$(function () {
$(".meter .bar").each(function () {
$(this)
.data("origWidth", $(this).width())
.width(0)
.animate({
width: $(this).data("origWidth")
}, 900);
});
});

Try the following. It uses an object after the CSS mods in animate() to set the properties.
You can use bounce just change the direction in options.
$(function () {
$(".meter .bar").each(function () {
$(this).data("origWidth", $(this).width())
.width(0)
.animate({
width: $(this).data("origWidth")
}, 700)
.effect('bounce', {times: 3,
direction: "right",
distance: 10}
, 700);
});
});
Demo: jsFiddle

It is a hack, check whether it is acceptable.
Because in order to use the bounce animation we need to call show on a hidden item, check whether the blinking effect is acceptable, then you can use it.
Try using the animate callback
$(function() {
$(".meter .bar").each(function() {
$(this).data("origWidth", $(this).width()).width(0)
.animate({
width : $(this).data("origWidth")
}, 900, function(){
$(this).effect("bounce", {
times:3,
direction: 'right'
});
});
});
});
Demo: Plunker
Demo: Effect

Onclick is not working

Why will this code not work as an onclick ?
$('.mainz11').click (function() {
$(this).animate({
height: '280px'
}, 800);
}, function() {
$(this).animate({
height: '100px'
}, 800);
});

If you're trying to first expand the element and then contract it, it should probably be something like this:
$('.mainz11').click(function() {
// determine target heights
if ($(this).hasClass("expanded")) {
var targetHeight = 100;
} else {
var targetHeight = 280;
}
// animate
$(this).animate({
height: targetHeight
}, {
duration: 800,
complete: function() { $(this).toggleClass("expanded"); }
});
});
This could use some cleaning up, but it does the trick, and you can track expanded items easily this way.
See here: http://jsfiddle.net/mpQek/3/

The click function takes only a single function but you are passing 2 functions to it. You can try it this way:
$('.mainz11').click (function() {
$(this).animate({
height: '280px'
}, 800);
});

If you want to chain animations, put the next animation as the function to run on complete of the first animation:
http://api.jquery.com/animate/
$('.mainz11').click (function() {
$(this).animate({ height: '280px', 800,
function() { $('.mainz11').animate({ height: '100px'}, 800)
);
});