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();
}
}
});
});

Make div animate up and down with jQuery

Im trying to get a div move up and down from its current position during a mouse hover event - I have the followng but it only works once and then stops as opposed to continually cycling?
tiptitle.stop(true, true).animate({
'top': '5px'
}, 100).stop(true, true).animate({
'top': '0px'
}, 100);

make an infinite loop
function animate(isOpen) {
tiptitle.stop().animate({'top': isOpen ? '5px' : '0px'}, 100, function() { animate(!isOpen); })
}

Can't use nested anchor

Ok. I've got the following script:
$('#exhibitions .item.plain').toggle(
function() {
$(this).css({
'height': '302px',
'z-index': '10',
'background': '#3F94AB'
});
$(this).find('p.title').css('color', '#E6E6E6');
$container.isotope('reLayout');
},
function() {
$(this).css({
'height': "130px",
'z-index': '0',
'background': '#CCC'
});
$(this).find('p.title').css('color', '#353334');
$container.isotope('reLayout');
});
Whereas .item.plain is given to a div with nested anchor. And when I click it which is obvious )) toggle() is fired.
<div class="item plain">
<!-- some stuff -->
</div>
How do I fix this?
Thanks!

If I well understood you don't want to toggle the element .item.plain when you click over the link, so stop the propagation of the event in this way
$('#exhibitions .item.plain a').on('click', function(evt) {
evt.stopPropagation();
});

Jquery animation looping

I am trying to make this animation loop
$(".jquery_bounce").ready(function(){
$("img", this).animate({ marginLeft : '20px' } , {
duration: 200,
complete:function() {
$(this).animate({ marginLeft : '0px' } , {
duration: 200,
easing: 'easeInCubic',
});
}
});
})
});
<div class="example">
<h4>Bounce</h4>
<div class="jquery_bounce bounce">
<img src="images/bounceimg.png" class="bounceimg" />
</div>
</div>
Please help.

try this~
$(function(){
$.extend({
show:function(){
$(".jquery_bounce").ready(function(){
$("img", this).animate({ marginLeft : '20px' } , {
duration: 200,
complete:function() {
$(this).animate({ marginLeft : '0px' } , {
specialEasing: {
left: 'swing',
top: 'easeOutBounce'
}
});
}
});
})
}
});
setInterval("$.show()",1000);
});
Demo:
http://jsfiddle.net/VpKw2/

Why don't you use setInterval()?
Edit:
Your animation bounces once, then stops, because...
You trigger the margin=20 part.
Upon completeness, another animation is scheduled: margin=0.
That's it. It doesn't loop because nothing is rescheduled to happen after the first pass.
Read the documentation on setInterval(): it's a function that let's you call another function at fixed (in milliseconds) intervals.
If you still want to do it as above, you must fix the problem I pointed out. Try thinking your way around it, and I'll help if you can't figure it out :).
Cheers.

Setup a bounce function that will continue the animation, either moving the element left or right:
function bounce(elm, leftZero) {
var px = leftZero ? '0px' : '20px';
elm.animate({ marginLeft : px}, {
duration: 200,
complete:function(){
//Continue bouncing
setTimeout(function(){
bounce(elm, !left);
},1);
}
});
}
$(".jquery_bounce").ready(function(){
$("img", this).each(function(){
//Start bouncing
bounce($(this), false);
});
})
});

jquery - run function on each element except the one that was clicked

As some example code, I might have something like this:
$('a.parent').click(function(){
$('a.parent').each(function(){
$(this).stop(true,false).animate({
width: '140px'
},200,function(){
});
});
$(this).animate({
width: '160px'
},200,function(){
});
});
The problem is that I don't want the element that was clicked to animate to 140px width and then back to 160px.
Is there a way to run 'each' on only the elements in a set who were not clicked? Or is there a better way?

you can use :not(this) so change :
$('a.parent').each(function(){
$(this).stop(true,false).animate({
width: '140px'
},200,function(){
});
});
to :
$('a.parent:not('+this+')').each(function(){
$(this).stop(true,false).animate({
width: '140px'
},200,function(){
});
});
or use .not(this) after $('a.parent') , so :
$('a.parent').not(this).each(function(){
$(this).stop(true,false).animate({
width: '140px'
},200,function(){
});
});