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
});
Related
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 build a jquery carousel. But when I do fast Swiperight or left for interval will interfere and work fastly. How can I fix this?
Here is uploaded project
I have settings variable in setting interval is time for Setinterval and items are my images, Slide is active image to show, Clock is my Setinterval Function.
when slide change I clear clock variable and after then set it with time out to user can view the slide and slide does not change.
var settings = $.extend({
interval: 5000,
element: this.selector,
items: ['images/1.jpg','images/2.jpg','images/3.jpg'],
slide: 0,
clock: 0,
}, options);
// Touch
$(settings.element + ' .primary img').on("swiperight", function () {
nextSlide();
pauseInterval();
setTimeout(function () {
if (!settings.clock)
settings.clock = setInterval(nextSlide, settings.interval)
}, 4000);
}).on("swipeleft", function () {
prevSlide();
pauseInterval();
setTimeout(function () {
if (!settings.clock)
settings.clock = setInterval(prevSlide, settings.interval)
}, 4000);
});
// Next Slide
function nextSlide() {
settings.slide++;
if (settings.slide >= settings.items.length) settings.slide = 0;
$(settings.element + ' .primary img').attr('src', settings.items[settings.slide]).attr('data-slide', settings.slide);
activeThumbnail()
}
// Prev Slide
function prevSlide() {
settings.slide--;
if (settings.slide < 0) settings.slide = settings.items.length;
$(settings.element + ' .primary img').attr('src', settings.items[settings.slide]).attr('data-slide', settings.slide);
activeThumbnail()
}
//Pause Interval
function pauseInterval() {
clearInterval(settings.clock);
settings.clock = 0;
}
You will find it simpler to work with setTimout() exclusively instead of a mix of setTimout() and setInterval().
There's no unique way to write the code. Here's one :
var settings = $.extend({
'delay': {
'long_': 9000, // (4000 + 5000) after swiping
'short_': 5000 // auto
},
'element': this.selector,
'items': ['images/1.jpg', 'images/2.jpg', 'images/3.jpg'], // array of Strings
'slide': 0,
'clock': null
}, options);
$(settings.element + ' .primary img').on('swiperight', nextSlide).on('swipeleft', prevSlide); // nice and simple
// nextSlide() and prevSlide() ...
// in auto: `delay` will be `settings.delay.short_`.
// on manual swipe: `delay` will be `undefined` and will default to `settings.delay.long_`.
function nextSlide(delay) {
delay = (delay === undefined) ? settings.delay.long_ : delay;
settings.slide = (settings.slide + 1) % settings.items.length;
set(nextSlide, delay);
}
function prevSlide(delay) {
delay = (delay === undefined) ? settings.delay.long_ : delay;
settings.slide = (settings.slide + settings.items.length - 1) % settings.items.length;
set(prevSlide, delay);
}
// set() does all the stuff common to nextSlide() and prevSlide().
function set(action, delay) {
$(settings.element + ' .primary img').attr('src', settings.items[settings.slide]).attr('data-slide', settings.slide);
activeThumbnail();
clearTimeout(settings.clock); // relevant only after a manual swipe, but does no harm in auto.
settings.clock = setTimeout(action.bind(null, settings.delay.short_), delay);
}
How do I let mouse hiding if inactive and inside a specific div ?
I have the "html5gallery-box-0" div on my website, and I need the mouse to hide if the user let it idle over/inside the div after a couple of seconds.
Here's the jsfiddle I'm working on.
And here's the js I'm using to hide the mouse when it's inactive.
$(function () {
var timer;
var fadeInBuffer = false;
$(document).mousemove(function () {
if (!fadeInBuffer) {
if (timer) {
console.log("clearTimer");
clearTimeout(timer);
timer = 0;
}
console.log("fadeIn");
$('html').css({
cursor: ''
});
} else {
fadeInBuffer = false;
}
timer = setTimeout(function () {
console.log("fadeout");
$('html').css({
cursor: 'none'
});
fadeInBuffer = true;
}, 500)
});
});
This will work
$(function() {
var timer;
var fadeInBuffer = false;
$(document).mousemove(function() {
if (!fadeInBuffer && timer) {
console.log("clearTimer");
clearTimeout(timer);
timer = 0;
console.log("fadeIn");
$('html').css({
cursor: ''
});
} else {
$('.html5gallery-box-0').css({
cursor: 'default'
});
fadeInBuffer = false;
}
timer = setTimeout(function() {
console.log("fadeout");
$('.html5gallery-box-0').css({
cursor: 'none'
});
fadeInBuffer = true;
}, 2000)
});
$('.html5gallery-box-0').css({
cursor: 'default'
});
});
and here is the fiddle (if you want to change the idle time just do it, it's on 2 seconds now).
http://jsfiddle.net/eugensunic/1Lsqpm3y/4/
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
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);
}