We Keep Coding

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

jQuery hover problem

on my site I display a lot of boxes, up to 60. Each box can be hovered and has it's own color. I realize that with the following js:
$(".box").each( function () {
$(this).data('baseColor',$(this).css('color'));
$(this).hover(function() {
$(this).animate({ backgroundColor: "#68BFEF" }, 500);
},function() {
$(this).animate({ backgroundColor: $(this).css('background-color') },
1000);
});
});
When a box is hovered it should get #68BFEF as background-color, when the mouse leaves the box the color should change to it's old value.
This is the way I apply the css:
<div id="primary">
<div class="box" style="background:...."></div>
<div class="box" style="background:...."></div>
<div class="box" style="background:...."></div>
....
</div>
My problem is that the hover effect should be faster, the color should change faster. Another problem is that not all boxes get there old background color.
Any ideas?

You need to pull the base color you're storing in data when leaving the hover, for example:
$(".box").each( function () {
$(this).data('baseColor',$(this).css('color'));
$(this).hover(function() {
$(this).animate({ backgroundColor: "#68BFEF" }, 500);
},function() {
$(this).animate({ backgroundColor: $(this).data('baseColor') }, 1000);
});
});
Or, a bit more optimized version using $.data() instead:
$(".box").each( function () {
$.data(this, 'baseColor', $(this).css('color'));
$(this).hover(function() {
$(this).stop().animate({ backgroundColor: "#68BFEF" }, 500);
},function() {
$(this).stop().animate({ backgroundColor: $.data(this, 'baseColor') }, 1000);
});
});