interrupt fadeTo function - javascript

Is there a way to interrupt the fadeTo animation on mouseover? For example: In the below code when someone hovers OFF "slider$controls" they fade to .1 opacity at 1750ms, but when you hover ON them they fade to 1 opacity at 500ms. If someone were to hover OFF of them and before the 1750ms was up they hovered back on them, slider$controls would not fade back to 1 opacity until the 1750ms was up which makes it appear unresponsive.
$(function () {
var fadeDelay = 4000,
// hide after 3 second delay
timer, hideControls = function (slider) {
clearTimeout(timer);
setTimeout(function () {
slider.$controls.hover(function () {
$(this).fadeTo(500, 1.0);
}, function () {
$(this).fadeTo(1750, 0.1);
});
}, fadeDelay);
};
});

You need to use jQuery's .stop function:
$(function () {
var fadeDelay = 4000,
// hide after 3 second delay
timer, hideControls = function (slider) {
clearTimeout(timer);
setTimeout(function () {
slider.$controls.hover(function () {
$(this).stop(1,1).fadeTo(500, 1.0);
}, function () {
$(this).stop(1,1).fadeTo(1750, 0.1);
});
}, fadeDelay);
};
});
What this does is stops the current animations, and jumps to the final result before starting the next animation.

You can use .stop() to clear animations from the queue/stop the current animation.
Best use it like this:
$(function () {
var fadeDelay = 4000,
// hide after 3 second delay
timer, hideControls = function (slider) {
clearTimeout(timer);
setTimeout(function () {
slider.$controls.hover(function () {
$(this).stop(true,false).fadeTo(500, 1.0);
}, function () {
$(this).stop(true,false).fadeTo(1750, 0.1);
});
}, fadeDelay);
};
});
This will clear the queue, so all animations are stopped and then start the animation from where the element has been stopped.

If you call the stop method on the element it will stop all animations.

.hover( function() {
$( this ).stop().fadeTo( 500, 1.0 );
}, function() {
$( this ).stop().fadeTo( 1750, 0.1 );
});

Related

jQuery CSS Opacity Animate

So I'm trying to create a simple fading slideshow with five slides that repeats when finished.
I feel like what I've got should work, but it's not.
<script type="text/javascript">
$(document).ready(function() {
function playslide(){
setTimeout(function(){
$("#slide-two").animate({"opacity":"1"}, 2000, 'swing').delay(11000).animate({"opacity":"0"}, 1, 'swing')}, 10000);
setTimeout(function(){
$("#slide-three").animate({"opacity":"1"}, 2000, 'swing').delay(11000).animate({"opacity":"0"}, 1, 'swing')}, 20000);
setTimeout(function(){
$("#slide-four").animate({"opacity":"1"}, 2000, 'swing').delay(11000).animate({"opacity":"0"}, 1, 'swing')}, 30000);
setTimeout(function(){
$("#slide-five").animate({"opacity":"1"}, 2000, 'swing').delay(11000).animate({"opacity":"0"}, 2000, 'swing')}, 40000);
}
playslide();
});
</script>
The idea is that the first slide will always have its opacity set to 1, so that when the last slide fades out, it's as if it's starting again. Each slide will hold for 10 seconds before fading out and after each slide fades in, the previous slide's opacity will be set back to 0 ready for the next time it repeats.
I hope it's not an obvious mistake. Apologies if it is...
Please why not use a .fadeIn() and .fadeOut() instead?
setTimeout(function () {
$("#slide-two").fadeIn(400, function () {
setTimeout(function () {
$("#slide-two").fadeOut(function () {
$("#slide-three").fadeIn(400, function () {
// So on...
});
}, 1000);
});
}, 1000);
Better to use these functions for doing it instead of you manually animating opacity.
https://jsfiddle.net/sk8ruo3u/
here's how I would do it
var list = ['.one','.two','.three','.four'];
$.each(list, function(index, value){
changeOpacity(value, index*1000);
});
function changeOpacity(target, timeout) {
setTimeout(function () {
$(target).animate({
opacity: 0.05
}, 1000);
}, timeout);
};

Loop animation 3 times and return to start

I have this code running an animation and I need to to stop and revert to a relatable event after 3 blinks.
$(window).load(function(){
$(function () {
function run_animation($element, delay, duration) {
$element.delay(delay).fadeOut(duration, function () {
$('.countdown-li').html("<li class='countdown-li'><a>Price updated</a>").fadeIn();
run_animation($element, delay, duration);
});
}
run_animation($('.countdown-li').delay(3000));
});
});
You can use a jQuery timer to stop animation after a certain amount of time you want, so try this script:
<script>
$(window).load(function () {
$(function () {
function run_animation($element, delay, duration) {
$element.delay(delay).fadeOut(duration, function () {
$('.countdown-li').html("<li class='countdown-li'><a>Price updated</a>").fadeIn();
run_animation($element, delay, duration);
});
}
run_animation($('.countdown-li').delay(3000));
setTimeout("$('.countdown-li').stop();", 5500);
});
});
</script>
I could have used the setinterval timer option found in javascript. http://javascript.info/tutorial/settimeout-setinterval

Need Help: Animation - Button Click -> Back and Forth, Once

function animatethis(targetElement, speed) {
$(targetElement).animate({
marginLeft: "+=250px"
}, {
duration: speed,
complete: function () {
targetElement.animate({
marginLeft: "-=250px"
}, {
duration: speed,
complete: function () {
animatethis(targetElement, speed);
}
});
}
});
};
animatethis($('#q1'), 1000);
I need a button where you press it, and the loop will go once. Just like an attack animation, where I press a button and the image will attack an other image.
Here you go man.... let me know if you have any questions!
Working Example
// Animation Function
function animatethis(targetElement, speed) {
$(targetElement).animate({"margin-left" : "+=50px"}, speed, function(speed){
$(this).animate({"margin-left" : "-=50px"}, speed);
});
};
//Animation Trigger
$('body').on('click', 'button', function(){
animatethis('#q1', 250);
});

Delay jQuery fadeIn due to unwanted behavior

How do I make my .right-menu DIV to fadein only after a couple of moments the mouse is hovering its parent .right-menu-background ? The thing is that when you move the cursor quickly in and out, .right-menu DIV is reappearing a lot of times after.
How do I delay animation for few ms?
Here's the code:
$(function(){
$(".right-menu-background").hover(function(){
$(this).find(".right-menu").fadeIn();
}
,function(){
$(this).find(".right-menu").fadeOut();
}
);
});
a easy fix is to use .stop()
$(function () {
$(".right-menu-background").hover(function () {
$(this).find(".right-menu").stop(true, true).fadeIn();
}, function () {
$(this).find(".right-menu").stop(true, true).fadeOut();
});
});
using timer
$(function () {
$(".right-menu-background").hover(function () {
var el = $(this).find(".right-menu");
var timer = setTimeout(function(){
el.stop(true, true).fadeIn();
}, 500);
el.data('hovertimer', timer);
}, function () {
var el = $(this).find(".right-menu");
clearTimeout(el.data('hovertimer'))
el.stop(true, true).fadeOut();
});
});
Use the stop() function in front of fading calls ...stop(true, true)
With those two parameters set to true, the animation queue is cleared and the last animation is played this will get ride of the weird effect
$(this).find(".right-menu").stop(true, true).fadeIn();
Use .delay() function.
Here is the code:
$(function(){
$(".right-menu-background").hover(function(){
$(this).find(".right-menu").delay(800).fadeIn(400);
},function(){
$(this).find(".right-menu").fadeOut(400);
});
});
Check the demo here: http://jsfiddle.net/Mju7X/

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

Categories

Resources