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

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

objects disappear while sliding over them while they fade in

I have a problem with some jQuery fadeIn effect. This is actually on this website: website here. The problem appears when you select any option from the main menu and during page load up (menu is fading In) slide over the menu buttons. Then some of them (the one you were fading over) will not appear, or will appear slightly faded.
I have used this code for buttons:
HTML:
<nav>
<a id="b1" href="index.html"><span>01. <strong>ABOUT US</strong></span><div></div></a>
<a id="b2" href="webdesign.html"><span>02. <strong>WEBSITE DESIGN</strong></span><div></div></a>
<a id="b3" href="mobile-websites.html"><span>03. <strong>MOBILE WEBSITES</strong></span><div></div></a>
<a id="b4" href="captive-portals.html"><span>04. <strong>CAPTIVE PORTALS</strong></span><div></div></a>
<a id="b5" href="portfolio.html"><span>05. <strong>PORTFOLIO</strong></span><div></div></a>
<a id="b6" href="contact-us.html"><span>06. <strong>CONTACT US</strong></span><div></div></a>
</nav>
JQUERY:
$(document).ready(function(){
$("nav a").mouseenter(function () {
$('div', this).stop(true, false).animate({
'height': '65px'
}, 100);
$(this).stop(true, false).animate({
'padding-top': '5px'
}, 300);
}).mouseleave(function () {
$('div', this).stop(true, false).animate({
'height': '0px'
}, 300);
$(this).stop(true, false).animate({
'padding-top': '25px'
}, 500);
});
$('#b1, #b2, #b3, #b4, #b5, #b6, #b7').hide();
for (var i=1; i<99; i++) {
(function(i){
setTimeout(function() {
$('#b'+i).fadeIn(500);
}, 300+100*i);
})(i);
}
});
JS FIDDLE HERE:
http://jsfiddle.net/tucado/9hhZW/
(slide mouse over buttons while fading in and you will know what I mean).
Basically I want buttons to appear normally so the sliding mouse over them won't interrupt them in fading to 100%.
Thank you in advance for any solution for this problem.

Just return from your mouseenter and mouseleave handlers if the element is being animated, you can do that with .is(':animated') .
See working fiddle
UPDATE: My above solution will exit when the element is animating, but that also included the own animations of the mouseenter, mouseleave handlers, we want to only exit if it's the fadein animation, so to distinguish that I set a property called fading when starting to fading an element and remove it when it ends the fade effect, so we can check for this property in the mouseenter mouseleave handlers.
See new working fiddle
And I paste the code here:
$(document).ready(function(){
$("nav a").mouseenter(function () {
if ($(this).data('fading')) //EXIT IF WE ARE FADING
return;
$('div', this).stop(true, false).animate({
'height': '65px'
}, 100);
$(this).stop(true, false).animate({
'padding-top': '5px'
}, 300);
}).mouseleave(function () {
if ($(this).data('fading')) //EXIT IF WE ARE FADING
return;
$('div', this).stop(true, false).animate({
'height': '0px'
}, 300);
$(this).stop(true, false).animate({
'padding-top': '25px'
}, 500);
});
$('#b1, #b2, #b3, #b4, #b5, #b6, #b7').hide();
for (var i=1; i<99; i++) {
(function(i){
setTimeout(function() {
$('#b'+i).data('fading', true).fadeIn(500, function() {
$(this).data('fading', false);
});
}, 300+100*i);
})(i);
}
});

I think the problem is, that you stop the elements animation before they are initialized first (first fadeIn();)
I've created a fiddle for you using the fadeIn() callback to append the hover after showing first time:
$(document).ready(function(){
var appendHover = function () {
$("nav a").mouseenter(function () {
$('div', this).stop(true, false).animate({
'height': '65px'
}, 100);
$(this).stop(true, false).animate({
'padding-top': '5px'
}, 300);
}).mouseleave(function () {
$('div', this).stop(true, false).animate({
'height': '0px'
}, 300);
$(this).stop(true, false).animate({
'padding-top': '25px'
}, 500);
});
}
$('#b1, #b2, #b3, #b4, #b5, #b6, #b7').hide();
for (var i=1; i<99; i++) {
(function(i){
setTimeout(function() {
$('#b'+i).fadeIn(500, function() {appendHover();});
}, 300+100*i);
})(i);
}
});
http://jsfiddle.net/9hhZW/2/

All divs back to default except for the active one jQuery

Okay, so here is my script.
When you click on a learn more button, it corresponds to that particular box and pulls down the right information accordingly.
I want to add a feature so when you click on ANOTHER learn more, and there is already a div open with information, it closes itself like the tail end of the toggle in this script.
Essentially, I don't want to have two learn more's open at the same time. If you choose one, then all the rest of them are closed. The way the page is setup, I can only have one open at a time.
$(document).ready(function(){
var service = $(".service"), text = $(".service-text, h1.service-heading"), moretext = $(".more-text");
$(".learn").toggle(
function()
{
$(this).parent().find(service).animate({ backgroundColor : "#000000" }, 800);
$(this).animate({ backgroundColor : "#FFFFFF" }, 800);
$(this).parent().find(text).animate({ color: "#FFF"}, 800);
$(this).parent().find("span.more").animate({ color : "#000000" }, 800, function () {
$(this).parent().parent().find(".service").animate({ height : "500px"}, 800, function () {
$(this).find(moretext).show().animate({ color: "#FFFFFF"}, 800);
$(this).parent().find("span.more").animate({ color : "#FFF"}, 800, function () {
$(this).hide();
$(this).parent().find("span.less").show( function () {
$(this).animate({ color: "#000000"}, 800);
});
});
});
});
},
function()
{
$(this).parent().find(service).animate({ backgroundColor : "#FFFFFF" }, 800, function () {
$(moretext).animate({ color: "#FFFFFF"}, 800, function () {
$(this).hide();
});
});
$(this).animate({ backgroundColor : "#000000" }, 800);
$(this).parent().find(text).animate({ color: "#000000"}, 800);
$(this).parent().find("span.less").animate({ color: "#FFFFFF"}, 800, function() {
$(this).parent().parent().find(service).animate({ height: "180px"}, 800, function () {
$(this).parent().find("span.less").animate({ color: "#000000"}, 800, function () {
$(this).hide();
$(this).parent().find("span.more").show( function () {
$(this).animate({ color: "#FFFFFF"}, 800);
});
});
});
});
});
});

you can make it this way
$(".learn").click(function(){
$(".learn").not(this).doSomeThing(/* some code */);
});
by this code you can exclude the current clicked item from the set

Pseudo code:
Give all the relavent divs a special class name
Separate your "close" function in the tail end of toggle out into a separate function, make it so it doesn't close divs with a class of "active"
Setup a listener for clicking on learn mores that add the class "active" to the thing clicked then calls that close function for all (other) divs before doing its thing

Jquery stop animate if another still running

I try to show and hide element on hover element. My code works, but when user mouseover and mouseout element very fast, animation run and run even mouseout it :(
$('.EventNameList').hover(
function() {
$(this).stop().animate({ backgroundColor: '#eaeaea' }, 200, "easeInQuad");
$(this).find('div#TrainingActionButtons').show("fast");
},
function() {
$(this).stop().animate({ backgroundColor: '#ffffff' }, 800, "easeOutQuad");
$(this).find('div#TrainingActionButtons').hide("fast");
});
});
And HTML:
<tr>
<td class="EventNameList">
<div id="TrainingActionButtons">
Some text
</div>
</td>
</tr>

I don't know about the performance on this but you could tell all elements to stop and go to end, as opposed to only the current element.
$('.EventNameList').hover(
function() {
// stop([clearqueue], [jumpToEnd])
$('.EventNameList').stop(true, true);
$(this).animate({ backgroundColor: '#eaeaea' }, 200, "easeInQuad");
$(this).find('div#TrainingActionButtons').show("fast");
},
function() {
$(this).stop().animate({ backgroundColor: '#ffffff' }, 800, "easeOutQuad");
$(this).find('div#TrainingActionButtons').hide("fast");
});
});

You could try to call stop(true,true) - this will clear the effect queue and skip to the end of currently running animation. Read more about it here