We Keep Coding

How to use correct Jquery animation

I have 2 animations curtain . The first animation work should be loaded as soon as the page , the second should work when you roll over the unit with a shutter and thus turn off the first animation . But I have run two animations at the same time until you will not deduce the cursor over the unit and will not return it back . What should I do?
function animationCurtain() {
$('.black_white').stop(true, true).animate({
width: "-=-100px"
}, 1200, function () {
$('.black_white').stop(true, true).animate({
width: "-=100px"
}, 1200, animationCurtain);
});
}
animationCurtain();
$(".before_after_slider").hover(function () {
$('.before_after_slider').mousemove(function (e) {
var offX = (e.offsetX || e.clientX - $black_white.offset().left);
$black_white.width(offX);
});
$('.before_after_slider').mouseleave(function (e) {
$black_white.stop().animate({
width: init_split
}, 100)
});
});

Jquery toggle action for animate function

I need to link jQuery toggle and animate functions together. When i click on the box, its size should change. My codes js fiddles snip is here. Why doesn't it work? It disappears on startup.
JS Fiddle snip
$(document).ready(function() {
$('.adiv').toggle(
function(){
$(this).animate({
width: "150",
height: "150",
}, 1000);
},
function(){
$(this).animate({
width: "77",
height: "77",
}, 1000);
});
});

Toggle will hide/show you element so because your element is visible at initial load the first time your toggle function is called it will animate but then the toggle will set a display none on the element causing it to hide. You should not use the toggle function for this.
You should use something like this:
$(document).ready(function() {
var big = false;
$('.adiv').on('click', function(){
if( big ) {
$(this).animate({
width: "77",
height: "77",
}, 1000);
} else {
$(this).animate({
width: "150",
height: "150",
}, 1000);
}
big = !big;
});
});
Here is a working example: http://jsfiddle.net/x7f34vr5/1/

You need to assign a click handler, or it will just run right away. eg.
$('.adiv').click( function () {
// Do stuff here
});
Toggle and animate don't really go together - here's a different way of doing it:
$(document).ready(function () {
$('.adiv').click( function () {
var newSize = $(this).width() > 77 ? 77 : 150;
$(this).animate({
width: newSize,
height: newSize,
}, 1000);
});
});
Fiddle here.

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

Expanding content areas using jQuery animate function

I'm using the animate function in jQuery to re-size a content area when the user hovers over the element.
The script works fine but I cant work out how to stop the script from resizing more than once if the element is hovered over more than once.
I have created a jsfiddle here I have also added the js I used.
var minheight = $('.section-fade').css("height");
$('.section-fade').hover(
function () {
$(this).animate({
height: $('.childsection').height()
}, 1000);
},
function () {
$(this).animate({
height: minheight
}, 1000);
});
Any ideas would be very much welcomed.
Cheers

What you're looking for is .stop().
.stop() will cancel all animations on an object.
http://jsfiddle.net/zxm9S/1/
var minheight = $('.section-fade').css("height");
$('.section-fade').hover(
function () {
$(this).stop().animate({
height: $('.childsection').height()
}, 1000);
},
function () {
$(this).stop().animate({
height: minheight
}, 1000);
});

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