Develop Reference

Why is my jquery animate() callback causing an overflow ? Recursion

I am using a recursive callback with the animate() jquery function.
However the page crashes everytime from the start.
var goingDown = true;
function animateChevron() {
if (goingDown) {
goingDown = !goingDown;
$('#chevron').animate({'opacity': 1}, 500, animateChevron);
}
else {
goingDown = !goingDown;
$('#chevron').animate({'opacity': 0.1}, 500, animateChevron);
}
}
$(document).ready(function(){
animateChevron();
});
Thank you
EDIT: I want it to act in a loop: the chevron appears, then disappears, then appears again etc. As long as the user is on the page.

Try this
$('#chevron').animate({'opacity': 1}, {
duration: 500,
complete: animateChevron
});
Also you can make this better
function animateChevron() {
$('#chevron').animate({'opacity': 1}, {
duration: 500
}).animate({'opacity': 0.1}, {
duration: 500,
complete: animateChevron
});
}

Please try this
$(document).ready(function(){
var speed=500; //in micro seconds
setInterval(function(){
var opacity=$('#chevron').css('opacity')<1 ? 1 : .1;
$('#chevron').animate({'opacity':opacity},speed);
},speed);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chevron">Chevron</div>

Your code is recursing infinitely.
I changed it to add a parameter goingDown, which when true will cause the animation to hide the chevron, and set the state of a global variable downState to match goingDown. I removed the recursion, you don't need it.
var downState = null;
function animateChevron(goingDown) {
if (!goingDown) {
$('#chevron').animate({
'opacity': 1
}, 500);
} else {
$('#chevron').animate({
'opacity': 0.1
}, 500);
}
downState = goingDown;
}
$(document).ready(function() {
animateChevron(true);
});
#chevron {
font-size: 28px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="chevron">
»
</div>

Here is another solution due to the solution I offered first (can still be found at the bottom of this answer) didn't fit the needs of the asker.
According to the following question async callbacks will not cause any stack overflows.
Will recursively calling a function from a callback cause a stack overflow?
(function animateChevron() {
// Chevron visible at this point
$('#chevron').animate({'opacity': 0}, 500, () => {
// Chevron invisible at this point
$('#chevron').animate({'opacity': 1}, 500, animateChevron);
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chevron">Chevron</div>
I found a very neat solution right here at stackoverflow as alternative.
How to make blinking/flashing text with css3?
Code snippet by Mr. Alien:
(function blink() {
$('#chevron').fadeOut(500).fadeIn(500, blink);
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chevron">Chevron</div>

Unslider on Image Hover

I am using unslider, jquery light slider in my website which is working but can I keep the plugin in my image hover ?
I have tried these but doesnot work:
$(function() {
$('.banner').unslider({
autoplay:false;
});
});
$("#banner").hover(function(){
if($('#banner').autoplay('false')){
autoplay : true;
}, function (){
autoplay: false;
}
});

Your usage is quite strange and I guess you may want to temporarily stop sliding when you hover the banner. After checking out the documentation of unslider, I guess you may have a test on the following snippet:
$(function() {
var slidey = $('.banner').unslider({}),
data = slidey.data('unslider');
// I don't really know the relationship of $('.banner') and $('#banner') in your HTML code.
$('.banner').hover(
function() {
data.stop();
},
function() {
data.start();
}
);
});

Make a DIV reveal upwards onClick

I found a topic for revealing a DIV upwards but as I am no Javascript expert, I am wondering how I can make this work onClick rather than on hover?
Just in case this helps, the link to previous topic is: How to make jQuery animate upwards
Any help is appreciated.

Here is a sample demo
$("#slideToggle").click(function () {
$('.slideTogglebox').slideToggle();
});
$("#reset").click(function(){
location.reload();
});
​
HTML:
<button id=slideToggle>slide</button>
<br/>
<div class="slideTogglebox">
slideToggle()
</div>

$(document).ready(function() {
var isClicked = false; //assuming its closed but its just logic
$('.button').click(function() {
if (isClicked) {
isClicked = true;
$(this).closest('div').animate({
height: "150px",
}, 400, "swing");
}
else
{
isClicked = false;
$(this).closest('div').animate({
height: "50px",
}, 400, "swing");
}
});
});
This is pretty bad way of doing it any way. You should consider trying to use CSS3 instead and then jsut using jQueries toggleClass
.toggleClass('animateUpwards)
Lets the browser use hardware capabilities to animate all the stuff and also its a nice one liner in JavaScript.

Try jQuery slideUp or as posted elsewhere jQuery slideToggle - Alternatively CSS3 Example
or from the questions you posted, perhaps this is what you meant:
http://jsbin.com/ogaje
Clicking the (visible part of) the div
$(document).ready(function() {
$('.featureBox').toggle(function() {
$(this).animate({top: '-390px', height:'540px'},{duration:'slow', queue:'no'});
// or $(this).slideUp()
},
function() {
$(this).animate({top: '0px', height:'150px'},{duration:'slow', queue:'no'});
// or $(this).slideDown()
});
});
Clicking something else
$(document).ready(function() {
$("#button").toggle(function() {
$("#someDiv").animate({top: '-390px', height:'540px'},{duration:'slow', queue:'no'});
// or $("#someDiv").slideUp()
},
function() {
$("#someDiv").animate({top: '0px', height:'150px'},{duration:'slow', queue:'no'});
// or $("#someDiv").slideDown()
});
});

Execute complete function only once in jQuery animation?

I'm trying to animate the font size of some text:
$("p").delay(500).animate({
"font-size": "+=50"
}, 1000, function() {
alert("Done");
})​;
Here's a demo.
I want to do something after animating the <p>s, which in the example is alert, but it surprisingly runs it for each <p>, and that's not what I want. Is there a possible way to make it just run once or is it not possible?

Just to notice, you can also use a promise object:
Return a Promise object to observe when all actions of a certain type
bound to the collection, queued or not, have finished.
First example (demo):
$("p").delay(500).animate({
"font-size": "+=50"
}, 1000).promise().done(function(){
alert("done");
});​
Second example (demo):
$.when($("p").delay(500).animate({
"font-size": "+=50"
}, 1000)).done(function(){
alert("done");
});​

var $p = $("p");
var lastIndex = $p.length - 1;
$p.delay(500).animate({
"font-size": "+=50"
}, 1000, function() {
if ($p.index($(this)) == lastIndex) {
alert("Done");
}
})
Demo

You could just keep a flag, since they should animate simultaneously:
var done = false;
$("p").delay(500).animate({
"font-size": "+=50"
}, 1000, function() {
if(!done) {
done = true;
alert("Done");
}
})​;
Here's a demo.

Give the P-tag in question an ID and select that ID rather than every P tag on the page. Like here: http://jsfiddle.net/LR8uP/1/
Or if you want to animate every P-tag but run the function only once, add a state variable, like here: http://jsfiddle.net/LR8uP/2/

This code can be used as a generic 'countdown' type of function.
// Function that returns a function,
// which when invoked 'count' number of times,
// will invoke the function 'fn'
function runOnZero (count, fn) {
return function () {
if (--count <= 0) {
fn();
}
};
}
// Get all the <p>s
var ps = $("p");
// Do your thing after ps.length calls
var whenAllDone = runOnZero(ps.length, function () {
alert("Done");
});
ps.delay(500).animate({
"font-size": "+=50"
}, 1000, whenAllDone)​;

jQuery effects don't work when I add a speed

I'm pretty new to jQuery (and javascript for that matter), so this is probably just something stupid I'm doing, but it's really annoying me!
All I'm trying to do is add a speed to jQuery's hide and show functions. The code I'm using is:
for (var i in clouds) {
$(clouds[i]).click(function() {
$(this).hide();
});
}
to hide clouds when they're clicked on, and
function fadeLogo(state) {
var element=document.getElementById('logo');
if (state=='home') {
element.hide;
element.src='images/home.png';
element.show;
}
else {
element.hide;
element.src='images/webNameLogo.png';
element.show;
}
}
to hide an image, change it and then show it again. This is called by
onMouseOver=fadeLogo('home') onMouseOut=fadeLogo('logo')
This works fine, but happens instantaneously. Whenever I try to include a speed, either as 'slow', 'fast' or in milliseconds, it won't work, they just stay in their original states. Even adding hide() without a speed throws up an error in Safari's error console:
TypeError: Result of expression 'element.hide' [undefined] is not a function.
No errors are reported for the clouds, they just sit there not doing anything!
Hope someone can help!
Thanks
EDIT:
Now have this for the image change:
$(function() { //This function fades the logo to the home button on mouseover
$('.logo').hover(function() {
$(this).fadeOut(
'slow',
function () {
$(this).attr ('src','images/home.png').fadeIn('slow');
});
}, function() {
$(this).fadeOut(
'slow',
function () {
$(this).attr('src','images/webNameLogo.png').fadeIn('slow');
});
});
});
Which fades the image out and in no problem, but doesn't change between the 2 images...
Oops, should have been #logo. Got that one working now, onto the pesky clouds...

The hide() method is used like so:
for (var i in clouds) {
$(clouds[i]).click(function() {
$(this).hide( 'slow' ); // or you can pass the milliseconds
});
}
As for the image hiding you should do something like this:
$( 'selector for your image' ).hide (
'slow',
function () {
$( this ).attr ( 'src', 'images/other.png' ).show ( 'slow' );
}
);