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 toggle not working properly?

I have a button that I want to click (in my case this is '.circle'). When I click it, I want the #data div to fade in then animate with a 'margin-top:50px'. Then when the user clicks the toggle button the second time it animates to 'margin-top:0px' then fades out.
However the problem I have run into is that when I click the toggle the third time I would expect it to run the first function again. But instead it does something weird and resets to a margin-top of 50px before the first function is run again.
I would really appreciate some help with this. Here is a JSFiddle I whipped up with identical code and you will see the problem i'm having after clicking it multiple times. Also another problem was when you click it for the first time it doesn't work, but works on the second click.
http://jsfiddle.net/sN8Tn/
Ill also post the bit of jquery below:
$(".button").click(function(){
$(".button").toggle(
function(){
$("#showme").fadeIn(500,
function(){
$("#showme").animate({ "margin-top" : "50px" }, 500, 'linear');
}
);
},
function(){
$("#showme").animate({ "margin-top" : "0px" }, 500, 'linear',
function(){
$("#showme").fadeOut(500);
}
);
});
});​

Remove the .click() function. The click is implied with the .toggle() function. jQuery .toggle() jsFiddle
$(".button").toggle(
function() {
$("#showme").fadeIn(500, function() {
$("#showme").animate({
"margin-top": "50px"
}, 500, 'linear');
});
}, function() {
$("#showme").animate({
"margin-top": "0px"
}, 500, 'linear', function() {
$("#showme").fadeOut(500);
});
});​

Jquery Timer Slide function

Right now I have a div that slides right to left and then vice versa back to its original place. But overall its not really how I want it to work. My main goal: is for the user to hover over the main div which will then pull out the sliding div. The part that gets tricky is the following: If the user forgets to slide the dive back, I want to give it time frame that will cause it to close automatically after a certain time has passed. Here is my working code so far: jsfiddle.net/eMsQr/14/.
My JavaScript function:
$(document).ready(function() {
$("#arrow").hover(
function(){
$("#inner").stop().animate({marginRight: "0px", opacity: "1px", height: "100px"}, 500 );
},
function(){}
);
});
$("#arrow").click(function(e){
$("#inner").stop().animate({marginRight: "-100px", opacity: "1px", height: "100px"}, 500 );
});

Try this: http://jsfiddle.net/vansimke/cJ5pf/
I hooked into the mouseleave event and added a setTimeout. You might need to catch the timeout if you need to cancel it later (i.e. they reenter the arrow)

Here's a jsFiddle example that sets a 3 second delay via the setTimeout function.:
jQuery
var cto;
$("#arrow").hover(
function() {
clearTimeout(cto);
$("#inner").stop().animate({
marginRight: "0px",
opacity: "1px",
height: "100px"
}, 500);
}, function() {
cto = setTimeout(function(){$('#arrow').trigger('click')}, 3000);
});
$("#arrow").click(function(e) {
$("#inner").stop().animate({
marginRight: "-100px",
opacity: "1px",
height: "100px"
}, 500);
});​
Note that if the user moves his mouse away and then returns it to the div, the box remains open again until they leave at which point the 3 second countdown timer begins.

You need to make sure you utilize the second function() in jQuery's hover method.
At the moment you're only animating your slide-out div when the user hovers over the main div. You want it to also animate on hover out.
Here's the updated jsFiddle.

Inside the hover function you can add an additional line to trigger the click event using the below line:
setTimeout(function() { $("#arrow").trigger('click'); }, 5000);
the 5000 is the number of milliseconds to wait before triggering the click.

see the fiddle here: http://jsfiddle.net/eMsQr/51/
it uses the mouseleave jquery and also delay. Change the value in the delay to get the time you want.
$("#arrow").mouseleave(function(){
$("#inner").stop().delay(500).animate({marginRight: "-100px", opacity: "1px", height: "100px"}, 500 );
});

You need to use setTimeout() to set the delay to closing the div. You also need to use clearTimeout() in the opening function to stop it auto closing if someone mousesout, then back over again:
var timeout;
$("#arrow").hover(
function() {
clearTimeout(timeout); // clear the timer which will close the div, as we now want it open
$("#inner").stop().animate({
marginRight: "0px",
opacity: "1px",
height: "100px"
}, 500);
}, function() {
timeout = setTimeout(function() {
$("#inner").stop().animate({
marginRight: "-100px",
opacity: "1px",
height: "100px"
}, 500);
}, 1000); // close the open div 1 second after mouseout.
}
);
Example fiddle

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