Pass animation function as parameter - javascript

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

Related

Animated arrow(s)

I'm using the following code to animate a div class arrow;
function animUp() {
$(".arrow").animate({
top: "0"
}, "slow", "swing", animDown);
}
function animDown() {
$(".arrow").animate({
top: "40px"
}, "slow", "swing", animUp);
}
$(document).ready(function() {
animUp();
});
Which works great and animates the arrow as intended. I've then added the class 'arrow' to another div with an arrow in to animate and they both stop animate down, long pause, animate up, long pause, animate down etc. Rather than the smooth animation of one arrow.
I've also tried having arrow and arrow2 and combining them in the script like this;
function animUp() {
$(".arrow, .arrow2").animate({
top: "0"
}, "slow", "swing", animDown);
}
function animDown() {
$(".arrow, .arrow2").animate({
top: "40px"
}, "slow", "swing", animUp);
}
$(document).ready(function() {
animUp();
});
With the same result as above. What else can I try to get them both animating smoothly?
jsFiddle - My html structure is using bootstrap
animations are added to a queue by default in jQuery to avoid queueing you should do the following:
function animUp() {
$(".arrow, .arrow2").animate({
top: "0"
}, {
duration: "slow",
queue: false,
easing: "swing",
complete: animDown
});
}
function animDown() {
$(".arrow, .arrow2").animate({
top: "40px"
}, {
duration: "slow",
queue: false,
easing: "swing",
complete: animDown
});
}
notice how instead of just passing in "slow" we now use an object
the following is from the jQuery site :: http://api.jquery.com/animate/
queue (default: true)
Type: Boolean or String
A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. As of jQuery 1.7, the queue option can also accept a string, in which case the animation is added to the queue represented by that string. When a custom queue name is used the animation does not automatically start; you must call .dequeue("queuename") to start it.

jquery small error

i am very new at jquery and code, here i am trying to get the setTimeout event to be inside the .mouseout event but i'm not sure how to do that as i keep getting syntax error in my editor. Here's what i have:
jQuery(document).ready(function() {
$('.slidedown').hide();
$('.trigger').hover( function(){ // enter animation
$('.slidedown').stop(true,true).animate({
height: ['toggle', 'swing'],
}, 600, function() { /* animation done */ });
}, function(){ // leave animation
$('.slidedown').mouseout()
setTimeout( function(){
$('.slidedown').stop(true,true).animate({
height: '0px',
}, 600, function() { /* animation done */ });
}, 1000 );
});
});
A small nuance, in this code the user mouses over a div, then another div bellow it slides down. Moving the mouse to the .slidedown div should keep it open until the mouse is removed. But will this code collapse the .slidedown div if the user doesn't mouse over .slidedown after .trigger but instead moves the mouse directly from .trigger to another area of page? I.e i need some kind of 'setTimeout' that is trigged only if the user doesn't move mouse over .slidedown after hovering over .trigger. Hope i make sense. Thanks for your help!
This line is the problem
$('.slidedown').mouseout()
It shoule be
$('.slidedown').mouseout( YOUR_CALLBACK_FUNCTION )
You should pass a callback function which will act as an event handler and inside that event handler you can call setTimeout() the way you have done it.
So the correct code would look like this
$('.slidedown').mouseout( function() {
setTimeout( function(){
$('.slidedown').stop(true,true).animate( {
height: '0px',
},
600,
function() { /* animation done */ }
); // animate ends here
}, 1000 ); // setTimeout ends here
}); // mouseout ends here
Thanks T.J and Arnab, this works:
$(document).ready(function() {
$('.slidedown').hide();
$('.trigger').hover( function(){ // enter animation
$('.slidedown').stop(true,true).animate({
height: ['toggle', 'swing'],
}, 600, function() { /* animation done */ });
}, function(){ // leave animation
$('.slidedown').mouseout( function() {
setTimeout( function(){
$('.slidedown').stop(true,true).animate( {
height: '0px',
},
600,
function() { /* animation done */ }
); // animate ends here
}, 1000 ); // setTimeout ends here
}); // mouseout ends here
});
});
But the other thing i mentioned about moving the mouse over .trigger but then away (but not into .slidedown) doesn't work. The .slidedown just remains open. :) :( I think it will be very complex to get a .mouseout event that has a kind of 'allow' rule for one destination of the mouse.

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

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

Jquery Hover is delayed

http://wesbos.com/tf/shutterflow/?cat=3
when one hovers over an image .cover is faded in. I use jquery to change the opacity because CSS doesn't work in IE for this purpose.
My code is:
$(document).ready(function () {
$('.slide').hover(function () {
$(".cover").animate({
opacity: 0.7
}, 300).fadeIn('300');
}, function () {
$(".cover").animate({
opacity: 0
}, 300).fadeOut('300');
});
});
I want the fade in to be instant, not wait 1 second. Any ideas?
You have two different animations happening sequentially: first, .animate({ opacity: 0.7 }, 300) and second .fadeIn(300). Since those are competing effects, it's probably not helping anything to have them both running.
If .fadeIn() will do what you want, try just using that:
$(document).ready(function() {
$('.slide').hover(
function() { $(".cover").fadeIn('300'); },
function() { $(".cover").fadeOut('300'); }
);
});

Categories

Resources