I'm playing around with jQuery animations and timers in Javascript, and I would like to achieve having a small sentence on my page pulsate (i.e. change opacity from 1->0.2, 0.2->1) a few seconds after the page loads, pulsate for a few seconds, stop pulsating and change color from black to red.
<div class="pulsate">Test</div>
<script>
$(function() {
var p = $(".pulsate");
for(var i=0; i<3; i++) {
p.animate({opacity: 0.2}, 1000, 'linear')
.animate({opacity: 1}, 1000, 'linear');
}
});
</script>
I have my current work in the following JSFiddle (http://jsfiddle.net/nLqmz/). Anyone have any thoughts about how I could approach this problem?
Here is a solution that works but there probably is a nicer way to do it:
$(function() {
var p = $(".pulsate"),
faded = false,
stopFading = false;
setTimeout(function(){
toggleFade();
setTimeout(function(){
stopFading = true;
p.animate({'color': 'red', 'opacity' : 1},{'duration' : 'fast'});
}, 3000);
}, 3000);
function toggleFade() {
if (!stopFading) {
p.animate({
'opacity': faded ? 0.2 : 1
},{
'duration' : 500,
'complete' : function(){
faded = faded ? false : true;
toggleFade();
}
});
}
}
});
http://jsfiddle.net/nLqmz/2/
$(function () {
var p = $(".pulsate");
var pulse = setTimeout(function () {
pulsate();
}, 3000);
var = pulsate_repeat ;
var pulsate = function() {
p.animate({
'color': 'red',
'opacity': 1
}, function () {
p.animate({
'color': 'black',
'opacity': 0.2});
});
//pulsate();
pulsate_repeat = setTimeout(function () {
pulsate();
}, 500);
};
//after 30 secs stop repeating
setTimeout(function () {
clearTimeout(pulsate_repeat);
}, 30000);
});
This should work, just customize the pulsate class in CSS the way you want:
function pulsateElement(element){
element.removeClass('pulsate');
setTimeout(function(){
element.addClass('pulsate');
setTimeout(function(){
pulsateElement(element);
},500);
},700);
}
Related
I have created a banner on my site, but I can't make the banner stop on mouseover. I just tried mouseover and hover with jQuery. I expect to stop the banner on mouseover
function mostrarBanner(indice) {
clearInterval(executar);
$('.carousel-banner .item-carousel').css({
'opacity': '0',
'z-index': '0'
});
$('.carousel-banner .item-carousel').eq(banner).css({
'opacity': '1',
'z-index': '1'
});
executar = setInterval(function() {
$('.carousel-banner .next').trigger('click');
}, 1000);
$('#banner').hover(function() {
console.log("DENTRO");
}, function() {
console.log("FORA");
});
}
var executar = setInterval(function() {
$('.carousel-banner .next').trigger('click');
}, 1000);
var banner = 0;
mostrarBanner(banner);
So either you need to cancel the interval and recreate it or you can just use a variable to not call the code.
var paused = false
executar = setInterval(function() {
if (paused) return
$('.carousel-banner .next').trigger('click');
}, 1000);
$('#banner').hover(function() {
paused = true
}, function() {
paused = false
});
Everything works fine. I have a simple Fade-In/Fade-Out Transition, but the pictures are not loaded when the page fade in. This destroy the complete experience. Any Idea how i can solve this?
Barba.Pjax.start();
Barba.Prefetch.init();
var FadeTransition = Barba.BaseTransition.extend({
start: function() {
Promise
.all([this.newContainerLoading, this.fadeOut()])
.then(this.fadeIn.bind(this));
},
fadeOut: function() {
return $(this.oldContainer).animate({ opacity: 0 }).promise();
},
fadeIn: function() {
var _this = this;
var $el = $(this.newContainer);
$(this.oldContainer).hide();
$el.css({
visibility : 'visible',
opacity : 0
});
$el.animate({ opacity: 1 }, 400, function() {
_this.done();
});
}
});
Barba.Pjax.getTransition = function() {
return FadeTransition;
};
I made animation on click, and it looks fine on PC. The problem is that animation on Android and iOS is sharp and looks ragged. I searched for solution for a long time, but still haven't find any solution.
This is my JS, you can view all the code on this jsfiddle.
$('.project-image').on('click', function() {
var $this = $(this);
var img = $(this).attr('id');
var minusLeft = $(this)[0].offsetLeft - 8;
var minusTop = $(this)[0].offsetTop - 80;
$('.show-description').fadeOut(600, function () {
$('.hide-description').fadeIn(600);
});
$('.flex-container img').not('#' + img).animate({
opacity: 0,
}, 200, "linear", function() {
$this.css({
top:'-'+minusTop+'px',
left:'-'+minusLeft+'px'
})
setTimeout(function() {
$('.flex-container img').not('#'+img).hide();
$this.css("position", 'static');
$('.flex-container').css('flex-flow', 'column wrap');
$('.'+img+'-text-block').show();
$('.'+img+'-text-block').animate({
opacity:1
}, 100)
}, 600)
});
})
$('.hide-description').on('click', function() {
$('.hide-description').fadeOut("slow", function () {
$('.show-description').fadeIn(1000);
});
$('[class*="-text-block"]').hide()
$('.flex-container').css('flex-flow', 'row wrap')
$('.flex-container img').css({
position: 'relative',
top:0,
left:0
})
$('[class*="-text-block"]').css('opacity', '0');
$('.flex-container img').animate({
opacity: 1,
}, 400)
$('.flex-container img').show()
})
This is a script I use in my website.
How can I stop the script from running automatically and instead be run upon mouse click ?
var nbOptions = 8;
var angleStart = -360;
// jquery rotate animation
function rotate(li,d) {
$({d:angleStart}).animate({d:d}, {
step: function(now) {
$(li)
.css({ transform: 'rotate('+now+'deg)' })
.find('label')
.css({ transform: 'rotate('+(-now)+'deg)' });
}, duration: 0
});
}
// show / hide the options
function toggleOptions(s) {
$(s).toggleClass('open');
var li = $(s).find('li');
var deg = $(s).hasClass('half') ? 180/(li.length-1) : 360/li.length;
for(var i=0; i<li.length; i++) {
var d = $(s).hasClass('half') ? (i*deg)-90 : i*deg;
$(s).hasClass('open') ? rotate(li[i],d) : rotate(li[i],angleStart);
}
}
$('.selector button').click(function(e) {
toggleOptions($(this).parent());
});
setTimeout(function() { toggleOptions('.selector'); }, 100);//# sourceURL=pen.js
example link link = http://www.jqueryscript.net/demo/Animated-Circle-Menu-with-jQuery-CSS3/index.html
If I am not mistaken, you don't want your script to start the Animation automatically on pageload.
So you simply have to remove the lase line from the code:
setTimeout(function() { toggleOptions('.selector'); }, 100);
This way, the animation is only started when you manually click on .selector button.
I am trying out the snow-fall animation. I want to stop it after for e.g. 5 seconds. I have current add the animate between setTimeOut, somehow there's no effect. What am I missing here?
Current code:
function fallingSnow() {
var snowflake;
snowflake = $('<div class="snowflakes"></div>');
$('#snowZone').prepend(snowflake);
snowX = Math.floor(Math.random() * $('#site').width() / 4);
snowSpd = Math.floor(Math.random() + 50000);
snowflake.css({
'left': snowX + 'px'
});
setTimeout(function(){
snowflake.stop().animate({
top: "700px",
opacity: "5",
}, snowSpd, function () {
$(this).remove();
fallingSnow();
})
},5000);
}
timer = Math.floor(Math.random() + 1000);
window.setInterval(function () {
fallingSnow();
}, timer);
UPDATE: AFTER UTILIZING #Kyojimaru's answer.
snowflake.animate({
top: "700px",
opacity: "5",
}, 5000, function () {
$(this).remove();
if(!end) {
fallingSnow();
window.setTimeout(function () {
clearInterval(interval);
end = true;
}, 5000);
}
}
);
updated fiddle
it's because your setInterval never stopped from calling fallingSnow, try changing your code to this
var firstCall = false;
var interval, timeout;
function fallingSnow() {
var snowflake;
snowflake = $('<div class="snowflakes"></div>');
$('#snowZone').prepend(snowflake);
snowX = Math.floor(Math.random() * $('#site').width() / 4);
snowSpd = Math.floor(Math.random() + 50000);
snowflake.css({
'left': snowX + 'px'
});
if(!firstCall) {
timeout = setTimeout(function(){
clearInterval(interval);
},5000);
firstCall = true;
}
}
timer = Math.floor(Math.random() + 1000);
interval = setInterval(function () {
fallingSnow();
}, timer);
basically what you need is clearing the interval that has been set for the function fallingSnow() using clearInterval only on the first time the function is called using setTimeout
here's the other example about it with what you want to do : JSFIDDLE
and here's what probably happen to you now : JSFIDDLE
EDIT
based on your fiddle here ( need to add jQuery and snowflakes css width and height to anything beside 0px )
your problem is you declare in the script as
var firstTime = false;
but checking it with
if (!firstCall)
so you need to change var firstTime = false; to var firstCall = false;
the other problem arise from this code here
snowflake.animate({
top: "700px",
opacity: "5",
}, snowSpd, function () {
$(this).remove();
fallingSnow();
});
which call the fallingSnow(); function again when animate finished, thus the snow is never stop falling, so you need to check if the the setTimeout have already clear the interval or not, you need to change your code to this
snowflake.animate({
top: "700px",
opacity: "5",
}, snowSpd, function () {
$(this).remove();
if(!end) {
fallingSnow();
}
});
if (!firstCall) {
timeout = setTimeout(function () {
clearInterval(interval);
end = true;
}, 5000);
firstCall = true;
}
and add var end = false; in the start with firstCall
here's the working one : JSFIDDLE