Develop Reference

jquery fade then redirect

Alright, I maybe a bit to strung out from caffeine atm to figure this one out on my own, but i'm trying to figure out how to redirect visitors to a page after splash image has faded.
$(document).ready(
function
()
{$('.wrapper a img').hover(
function ()
{
$(this).stop().animate({ opacity: .4 } , 200);
settimeout(function(){window.location = '/blog';}, 200);
}
)});
It's not working and is drving me a bit nutt

.animate allows you to define a callback that will be invoked when the animation is complete:
$(this).stop().animate({ opacity: .4 } , 200, "swing", function() {
window.location = '/blog';
});
The third argument ("swing") is simply the default for that parameter.
An alternative syntax for the same is
.animate({ opacity: .4 }, {
duration: 200,
complete: function() { window.location = '/blog'; }
);
Finally, yet another way is to use a .promise that will be completed when the animation queue for the element is empty (i.e. all animations have ended):
.animate({ opacity: .4 } , 200)
.promise().done(function() { window.location = '/blog'; });

Why is my jQuery breaking when I move my mouse really fast?

I have made some hover states the show a div on hover of an element. It works really nice although if I move my mouse a few times quickly over it then it seems to break and the div no longer shows until i refresh the page.
Any ideas what might cause this as it has me baffled.
$('#s2_coffeetable').hover(function() {
$('#popup1').stop().animate({
opacity: 'toggle'
}, 5)
}, function() {
$('#popup1').stop().animate({
opacity: 'toggle'
}, 5)
});
$('#s2_drinks').hover(function() {
$('#popup2').stop().animate({
opacity: 'toggle'
}, 100)
}, function() {
$('#popup2').stop().animate({
opacity: 'toggle'
}, 100)
});

Try this .stop( [clearQueue] [, jumpToEnd] ) jQuery reference...
.stop(true, true)
Pass these 2 parameters to stop function.

Pass animation function as parameter

I'm writing a simple function to animate a div (in this example called 'helpBox'). This div will fade in and slide down when it is executed.
However, I'd like to be able to pass in the type of animation I'd like to do alongside the fade. I'm fading in via manipulating the opactity attribute but I'm sliding down via use of slideDown(). The thing is, I'd like to be able to specifiy a particular animation to do alongside the fade (i.e. maybe a slideUp() to hide the help box again).
showHelp: function (helpBox, myAnimation) {
if (!helpBox.is(':visible')) {
helpBox.css('opacity', 0)
.slideDown('slow') //have this function as the parameter (i.e. myAnimation)
.animate
(
{ opacity: 1 },
{ queue: false, duration: 'slow' }
);
}
}
As you can see I'd like to replace the hard-coded .slideDown() with a function passed in (myAnimation). I have no idea how to call this though:
showHelp($('#myHelpBox'), function() { /*pass the animation in somehow*/ });

You can pass the parameter as a string(function name) and try this.
showHelp: function (helpBox, myAnimation) {
if (!helpBox.is(':visible')) {
helpBox.css('opacity', 0)[myAnimation]('slow')
.animate
(
{ opacity: 1 },
{ queue: false, duration: 'slow' }
);
}
}

How to get image to pulse with opacity with JQuery

I am trying to get an image to change opacity smoothly over a duration of time. Here's the code I have for it.
<script type="text/javascript">
pulsem(elementid){
var element = document.getElementById(elementid)
jquery(element).pulse({opacity: [0,1]},
{ duration: 100, // duration of EACH individual animation
times: 3, // Will go three times through the pulse array [0,1]
easing: 'linear', // easing function for each individual animation
complete: function() { alert("I'm done pulsing!"); }
})
</script>
<img src="waterloo.png" onmouseover="javascript:pulsem("waterloo")" border="0" class="env" id="waterloo"/>
Also, is there a way for this to happen automatically without the need of a mouseover? Thanks.

I'm assuming your code is for the jQuery pulse plugin: http://james.padolsey.com/javascript/simple-pulse-plugin-for-jquery/
If your above code is not working, then fix "jquery" to be "jQuery".
For starting it on page load, just do:
jQuery(function() {
jQuery('#yourImageId').pulse({
opacity: [0,1]
}, {
duration: 100, // duration of EACH individual animation
times: 3, // Will go three times through the pulse array [0,1]
easing: 'linear', // easing function for each individual animation
complete: function() {
alert("I'm done pulsing!");
}
});
Add an id to your image and you're golden.
});

To fire the animation of your own accord:
pulsate( $('#waterloo') );
revised code to continually pulsate (wasn't sure if this was what you're after) - the pulsate effect is relegated to it's own function so you can call it directly or in your event handler
<script type="text/javascript">
$(function() { // on document ready
$('#waterloo').hover( //hover takes an over function and out function
function() {
var $img = $(this);
$img.data('over', true); //mark the element that we're over it
pulsate(this); //pulsate it
},
function() {
$(this).data('over', false); //marked as not over
});
});
function pulsate(element) {
jquery(element).pulse({opacity: [0,1]}, // do all the cool stuff
{ duration: 100, // duration of EACH individual animation
times: 3, // Will go three times through the pulse array [0,1]
easing: 'linear', // easing function for each individual animation
complete: function() {
if( $(this).data('over') ){ // check if it's still over (out would have made this false)
pulsate(this); // still over, so pulsate again
}
}});
}
<img src="waterloo.png" border="0" class="env" id="waterloo"/>
Note - to trigger events, you can use .trigger() or the helper functions, like
$('#waterloo').mouseover() // will fire a 'mouseover' event
or
$('#waterloo').trigger('mouseover');

this might be what you're looking for.
http://www.infinitywebcreations.com/2011/01/how-to-create-a-throbbingpulsing-image-effect-with-jquery/

I personally do something like this to pulse when the mouse hovers over the image and return to full opacity on mouse out...
$(document).ready(function () {
function Pulse(Target, State) {
//Every 750ms, fade between half and full opacity
$(Target).fadeTo(750, State?1:.5, function() {Pulse(Target, !State)});
}
$("#ImageId").hover(function () {
$(this).stop()
Pulse(this);
}, function () {
$(this).stop(false, true).fadeTo(200, 1); //200ms to return to full opacity on mouse out
});
});

I'm using the jQuery .scroll() function, why can't I override its effects with another function?

I'm using the jQuery .scroll() function to make a certain element fade to 0.2 opacity. Since there is no native "scrollstop" indicator, I decided to make the element fade back to 1.0 opacity on hover. However, it doesn't work.
Here's my code:
$(document).ready(function() {
$(window).scroll(function() {
$("#navlist").animate({ opacity: 0.2 }, 2000);
});
$("#navlist").hover(
function() {
$(this).animate({ opacity: 1 }, 500);
}, function() {
$(this).animate({ opacity: 1 }, 500); // just to be safe?
}
);
});
When I scroll, the #navlist element fades, but when you hover over it nothing happens. But if you refresh the page when you're half way down, the element automatically fades as soon as you refresh, before I've scrolled, and if you try to hover to fade it back in, nothing happens.
Any thoughts?

try to stop animation first
$(document).ready(function() {
$(window).scroll(function() {
$("#navlist").stop().animate({ opacity: 0.2 }, 2000);
});
$("#navlist").hover(function() {
$("#navlist").stop().animate({ opacity: 1.0 }, 500);
},
function() {
$("#navlist").stop().animate({ opacity: 1.0 }, 500);
}
);

The problem is that the scroll event, gets called multiple times during a single scroll (10-20 per a single mouse wheel scroll), so #navlist gets a lot of animate events of 2 seconds.
I am not exactly sure what's going on with jQuery, but when you hover it, even though the opacity: 1 animations run, they end up running the queued #navlist animations.
I solved the problem using a sort of flag, I bet you can find something more efficient.
$(document).ready(function(){
var isAnimationBusy = false;
$(window).scroll(function(){
if(isAnimationBusy) return;
isAnimationBusy = true;
$("#navlist").animate(
{ opacity: 0.2 }, 2000,
function(){ isAnimationBusy = false; }
);
});
$("#navlist").hover(
function(){
isAnimationBusy = false;
$(this).stop().animate({ opacity: 1 }, 500);
},
function(){
isAnimationBusy = false;
$(this).stop().animate({ opacity: 1 }, 500);
}
);
});
Edit: The animation stop will solve the problem, I still believe you should control how many times you call the animate event. There could be a performance hit.