How to get image to pulse with opacity with JQuery - javascript

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

Related

Smoothstate.js - removeClass not working onReady function

I'm using Smoothstate.js to add page transitions to my website and I'm trying to show a loading page between each page transition using the onStart, onProgress and onReady functions.
The code I have works, but every now and again it get's stuck on the loading page and the container div isn't removing the class 'is-loading'. However, it is removing the is-exiting class even though they're with the same removeClass line?
I'm so confused as to why It's not removing. Can anyone help please?
// Photoswipe
$(function(){
'use strict';
var options = {
prefetch: true,
debug:true,
cacheLength: 0,
repeatDelay: 500,
onStart: {
duration: 0, // Duration of our animation
render: function ($container) {
// Add your CSS animation reversing class
$container.addClass('is-exiting');
// Restart your animation
smoothState.restartCSSAnimations();
}
},
onProgress: {
// How long this animation takes
duration: 0,
// A function that dictates the animations that take place
render: function ($container) {
setTimeout(function() {
$container.addClass('is-loading');
$('#progressBar').append('<div id="bar"></div>');
var progress = '100%';
$('#bar').animate({
width: progress
}, 400);
}, 500);
}
},
onReady: {
duration: 0,
render: function ($container, $newContent) {
$container.removeClass('is-loading is-exiting');
// Inject the new content
$container.html($newContent);
},
},
onAfter: function() {
navbarAnimate();
closeMenu();
ImageSliders();
initPhotoSwipeFromDOM('.gallery');
ImageOverlay();
}
},
smoothState = $('#main').smoothState(options).data('smoothState');
});
Just a hint:
you add is-loading, 500ms after the loading process started. So may it be possible that onReady gets fired before your 500ms timeout? And therefore is-loading will be added as class again, after your removeClass call?
tl;dr: the problem is most likely the timeout here
setTimeout(function() {
$container.addClass('is-loading');
$('#progressBar').append('<div id="bar"></div>');
var progress = '100%';
$('#bar').animate({
width: progress
}, 400);
}, 500);

sliding an image down when it appears

function showImage() {
var toggleImage = document.getElementById("loadingImage");
if(toggleImage.style.display == "inline") {
document.getElementById('loadingImage').style.display='none';
} else {
document.getElementById('loadingImage').style.display='inline';
document.getElementById('loadingImage2').style.display='none';
document.getElementById('loadingImage3').style.display='none';
document.getElementById('loadingImage4').style.display='none';
}
}
<img class="TeamMembersPictures" `enter code here`src="http://www.ishop247.co.uk/TeamPictures/Yvonne.jpg" onclick="showImage();"/>
<img id="loadingImage" src="http://www.ishop247.co.uk/TeamPictures/YvonneBG.jpg" style="display:none"/>
This is the code i have to display a new image on click of another image but what i want is for it to be a smooth slide down on the image that is displayed onclick
Better yet, why not use CSS animation? Check out Animate.css (I have no affiliation) which allows you to simply include the css file at the top of the page and then do something like this...
<img src="whatever.png" class="animated bounceInDown"/>
You can download the css here...
http://daneden.github.io/animate.css/
To slide an element down with jQuery, you want the slideDown function. For example:
function showImage() {
$('#loadingImage').slideDown();
}
As you can see from the link to the slideDown documentation, there are many ways you can customize the slide.
function showImage() {
$('#loadingImage').slideDown({
duration: 400,
easing: 'swing',
queue: true,
specialEasing: {/*key: value...*/},
step: function(now, tween) {
// ...
},
progress: function(animation, progress, remainingMs) {
// ...
},
complete: function() {
// ...
},
start: function(animation) {
// ...
},
done: function(animation, jumpedToEnd) {
// ...
},
fail: function(animation, jumpedToend) {
// ...
},
always: function(animation, jumpedToend) {
// ...
}
});
}
If you don't need much of that, there are a couple smaller variations on the function (all parameters are optional):
$('#loadingImage').slideDown(400, function() {
// complete...
});
$('#loadingImage').slideDown(400, 'swing', function() {
// complete...
});
Core jQuery only offers 'swing' and 'linear' for the easing values. Plugings such as jQuery UI can offer additional values. Duration can be a number (in milliseconds) or a string ('fast' = 200ms or 'slow' = 600ms).

Loop functions, animate css rotation

Im trying to create a function that animate a transition and then once it has done this, animates the rotation back to its starting point and loops this infinitely.
I have the following only I cant get the animation working nor the return to default?
http://jsfiddle.net/QfeC2/
function drunk(){
$('div').css({'-webkit-transform':'rotate(1deg)'});
$('div').delay(4000).css({'-webkit-transform':'rotate(0deg)'});
}
setTimeout(function() { drunk(); }, 2000);
.delay() only works when you are using jquery animation, you must use setTimeout
function drunk() {
$('div').css({
'-webkit-transform': 'rotate(1deg)'
});
setTimeout(function () {
$('div').css({
'-webkit-transform': 'rotate(0deg)'
});
}, 4000);
}
setTimeout(function() { drunk(); }, 2000);
DEMO
Use setInterval for continous loop
setInterval(function(){drunk();},8000);
DEMO
If you're animating with css why not using pure CSS?
You can wrap the animation property in a Class and toggle that class in JS.
div {
-webkit-animation:anim 2s ease infinite;
}
#-webkit-keyframes anim
{
0 {-webkit-transform:rotate(0deg);}
50% {-webkit-transform:rotate(1deg);}
100% {-webkit-transform:rotate(0deg);}
}
Updated fiddle
see your updated fiddle:
http://jsfiddle.net/QfeC2/3/
function AnimateRotate(angle) {
// caching the object for performance reasons
var $elem = $('div');
// we use a pseudo object for the animation
// (starts from `0` to `angle`), you can name it as you want
$({deg: 0}).animate({deg: angle}, {
duration: 2000,
step: function(now) {
// in the step-callback (that is fired each step of the animation),
// you can use the `now` paramter which contains the current
// animation-position (`0` up to `angle`)
$elem.css({
transform: 'rotate(' + now + 'deg)'
});
},
complete: function(){
AnimateRotate(360);
}
});
}
AnimateRotate(360);
UPDATE
to rotate back after each cycle:
http://jsfiddle.net/QfeC2/9/
var boolDirection = true;
function AnimateRotate(angle) {
// caching the object for performance reasons
var $elem = $('div');
// we use a pseudo object for the animation
// (starts from `0` to `angle`), you can name it as you want
$({deg: 0}).animate({deg: angle}, {
duration: 2000,
step: function(now) {
// in the step-callback (that is fired each step of the animation),
// you can use the `now` paramter which contains the current
// animation-position (`0` up to `angle`)
$elem.css({
transform: 'rotate(' + now + 'deg)'
});
},
complete: function(){
if(boolDirection)
{
AnimateRotate(-360);
boolDirection = false;
}
else
{
AnimateRotate(360);
boolDirection=true;
}
}
});
}
AnimateRotate(360);

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.

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