I m working on small animation where the link will have fadein fadeout effect with some delay but when when user moveover his mouse on link it should stop and start animate once again once mouse out.
Currently When user moveover mouse on link 2 or more link start appering and its stop at last.
https://jsfiddle.net/e1fye4uy/3/
function InOut(elem) {
elem.delay()
.fadeIn(1000)
.delay(10000)
.fadeOut(1000,
function () {
if (elem.next().length > 0) {
InOut(elem.next());
} else {
InOut(elem.siblings(':first'));
}
}).mouseover(function () {
//$(this).stop(true, false);
// $(this).clearQueue();
elem.stop($(".newsFlash").children('li'), true, false);
}).mouseout(function () {
if (elem.next().length > 0) {
elem.clearQueue();
// elem.finish();
InOut($(this));
}
});};$(function () {
$('#content li').hide();
InOut($('#content li:first'));
});
This is my solution
https://jsfiddle.net/e1fye4uy/8/
var doAniamtion = false;
var lis = $("#content li");
var time;
function start(){
time = setInterval(function(){
next();
}, 2000);
console.log("start" + time);
}
function stop(){
console.log("stop " + time)
clearInterval(time);
}
function next(){
var lisLength = $(lis).length;
for(var i=0;i<lisLength;i++)
if($(lis[i]).hasClass("current"))
{
fadOut(lis[i],function(){
fadIn(((i+1) < lisLength) ? lis[i+1] : lis[0]);
});
return;
}
}
function fadIn(obj, callback){
$(obj).addClass("current");
$(obj).animate({
opacity:1
},500,function(){
callback && callback();
});
}
function fadOut(obj, callback){
$(obj).addClass("current");
$(obj).animate({
opacity:0
},500,function(){
$(obj).removeClass("current");
callback && callback();
});
}
start();
$("#content").mouseover(function(){
stop();
});
$("#content").mouseout(function(){
start();
});
So, I decide to use animation instead of use fadeIn and fadeOut, setInterval (+info http://www.w3schools.com/jsref/met_win_setinterval.asp) and class "current" in the li HTML element to know witch li is current visible.
PS:
For change the time that li remains visible change the setInterval Time.
For make the animations more fast or slow change the time in animation inside of fadIn and fadout functions
Any doubt about the code, ask!
Related
I have 5 slides, which are changing after 5 second or on mouse click(Done with SetInterval function, which triggers 'click')
Problem is following, for example:
Lets say it's set to #slide_1, when 4 seconds passed and i manually click on #slide_2,
next slide(#slide_3) comes active after 1 second. It's all SetInterval, that triggers click and i have no idea how to add 5 second interval again, between manual and SetInterval clicks..
Here is my code,
setInterval(function() {
if(!$('.buttons > ul ').children('.butt_press').next().length){
$('.buttons > ul').children(':first').trigger('click');
}
else{
$('.buttons > ul').children('.butt_press').next().trigger('click');
}
}, 5500);
thanks
setInterval returns an interval id which you can use to clear the interval and then re-create it.
var nextSlide = function () {
if(!$('.buttons > ul ').children('.butt_press').next().length){
$('.buttons > ul').children(':first').trigger('click');
} else {
$('.buttons > ul').children('.butt_press').next().trigger('click');
}
};
var interval = setInterval(nextSlide, 5000);
$('some_selector').on('click', function () {
nextSlide();
clearInterval(interval);
interval = setInterval(nextSlide, 5000);
});
I want create element which will appear with bounce effect and this effect should run all time while user not clicking to help_man, when its happened effect is completed. Now its work, but not prefer, effect run slow and eventually faster and faster. Bounce does not always stop on mouse click event.
JsFiddle
HTML:
<div class='task_wrapper'>
<div class='help_man'>
<img src='images/cow.png'/>
</div>
</div>
JS:
<script src="js/jquery-ui-bounce.min.js"></script>
<script>
var to_stop = 0;
function run_bounce()
{
if(to_stop==0)
{
$(".task_wrapper").effect( "bounce", "fast" );
setInterval(run_bounce,3000);
}else{
return;
}
}
$(document).ready(function(){
$(".help_man").click(function() {
to_stop = 1;
});
run_bounce();
});
</script>
Thanks!
You need to add positon as abosulte in CSS.That is way we animate DOM elements on fly.
Alway best pratices to clearInterval before call setInterVal(); which return number.
.task_wrapper{
postion:absolute;
}
var to_stop = 0,interval;
function run_bounce()
{
if(to_stop==0)
{
$(".task_wrapper").effect( "bounce", "fast" );
clearInterval(interval);
interval = setInterval(run_bounce,3000);
setInterval(run_bounce,3000);
}else{
$(".task_wrapper").stop(); //Note here stop()
}
}
$(document).ready(function(){
$(".help_man").click(function() {
to_stop = 1;
});
run_bounce();
});
Fiddle Demo
I think you need to clear the interval,
Fiddle: http://jsfiddle.net/9nEne/13/
JS
var to_stop = 0, interval;
function run_bounce() {
if(to_stop==0)
{
$(".task_wrapper").effect( "bounce", "fast" );
clearInterval(interval);
console.log(interval);
interval = setInterval(run_bounce,3000);
}else{
$(".task_wrapper").stop();
}
}
$(document).ready(function(){
$(".help_man").click(function() {
to_stop = 1;
});
run_bounce();
});
How do I add a pause effect when I hover over an image in a jQuery slideshow?
$(document).ready(function () {
slideShow();
});
function slideShow() {
var showing = $('#slideshow .show');
var next = showing.next().length ? showing.next() : showing.parent().children(':first');
var timer;
showing.fadeOut(500, function () {
next.fadeIn(200).addClass('show');
}).removeClass('show');
setTimeout(slideShow, 3000);
}
var hovering = false; //default is not hovering
$("#slideshow").hover(function () { //*replace body with your element
hovering = true; //when hovered, hovering is true
}, function () {
hovering = false; //when un-hovered, hovering is false
slideShow(); //start the process again
});
function slideShow() {
if(!hovering) { //if not hovering, proceed
/* Your code here*/
nextSlide();
setTimeout(slideShow, 1000);
}
}
function nextSlide(){
var showing = $('#slideshow .show');
var next = showing.next().length ? showing.next() : showing.parent().children(':first');
var timer;
showing.fadeOut(500, function () {
next.fadeIn(200).addClass('show');
}).removeClass('show');
}
Demo: http://jsfiddle.net/DerekL/mqEbZ/
Use .delay() that will help.
Description: Set a timer to delay execution of subsequent items in the queue.
I think you need two functions for that ... slideShow() and other one say pauseSlideshow()... now call the slideshow() on mouseout event and on mouseenter call pauseSlideShow()
your code should be something like this
$(document).ready(function(){
$('.slider').mouseout( slideShow());
$('.slider').mouseenter( pauseSlideShow());
});
function slideShow() {
var showing = $('#slideshow .show');
var next = showing.next().length ? showing.next() : showing.parent().children(':first');
var timer;
showing.fadeOut(500, function() { next.fadeIn(200).addClass('show'); }).removeClass('show');
timeOut = setTimeout(slideShow, 3000);
}
function PauseSlideShow() {
window.clearTimeout(timeOut);
}
TRY IT
Working off of Derek's answer, an alternative to hover would be to use mouseenter and mouseleave.
See the working slideshow Jsfiddle: Demo: http://jsfiddle.net/highwayoflife/6kDG7/
var hovering = false;
var slideshow = $("#slideshow");
slideshow.mouseenter(function() {
hovering = true;
}).mouseleave(function() {
hovering = false;
slideShow();
});
function slideShow() {
if (!hovering) {
# Some browsers don't interpret "display:block" as being visible
# If no images are deemed visible, choose the first...
var currentImg = (slideshow.children("img:visible").length) ? slideshow.children("img:visible") : slideshow.children("img:first");
var nextImg = (currentImg.next().length) ? currentImg.next() : slideshow.children("img:first");
currentImg.fadeOut(500, function() {
nextImg.fadeIn(500, function() {
setTimeout(slideShow, 2000);
});
});
}
}
$(document).ready(function() {
slideShow();
});
I'm using a hover function with a fade in and fade out to show and hide images. The problem is I want each image to finish fading before the other begins to fade in.
This is what I'm trying. The setTimeout function has broke the hover function and all images are displaying when the page loads.
$(document).ready(function() {
var delay = 0;
//Everything below repeats for each image
$("#image_e_natural_minor").hide();
$("#hover_e_natural_minor").hover(
if (delay == 1) {
setTimeout(function() {
function () {
$("#image_e_natural_minor").fadeIn(1000);
}, //mouse over
function () {
$("#image_e_natural_minor").fadeOut(1000);
delay = 0;
} //mouse out
); //hover close
},1000); // delay time
}
else {
$("#hover_e_natural_minor").hover(
function () {
delay = 1;
$("#image_e_natural_minor").fadeIn(1000);
}, //mouse over
function () {
$("#image_e_natural_minor").fadeOut(1000);
delay = 0;
} //mouse out
); //hover close
}
This is what I had before that works but it will display two images at once.
$("#image_e_natural_minor").hide();
$("#hover_e_natural_minor").hover(
function () {
$("#image_e_natural_minor").fadeIn(1000);
}, //mouse over
function () {
$("#image_e_natural_minor").fadeOut(1000);
} //mouse out
); //hover close
$("#image_e_harmonic_minor").hide();
$("#hover_e_harmonic_minor").hover(
function () {
$("#image_e_harmonic_minor").fadeIn(1000);
}, //mouse over
function () {
$("#image_e_harmonic_minor").fadeOut(1000);
} //mouse out
); //hover close
Sorry for the poor syntax. I'm very new to programming.
jQuery functions fadeIn and fadeOut both have a callback param which is triggered when the animation finishes, so you can hook the fadeIn for current image call right when fadeOut finishes.
But: try this on a single image first; once you have it working try to rewrite it in a function you can call on every image. Remember DRY principle: Don't Repeat Yourself.
EDIT:
What I mean is: When hover over image A 'hover detector', the function should first fadeOut the currently visible image B (which you can get using :visible's jQuery selector) and when the fadeOut animation finishes it will call the fadeIn of image A (which you provided throw the callback param):
$("#image_e_natural_minor").hide();
$("#hover_e_natural_minor").hover(
function () {
$(".myImageClass:visible").fadeOut(1000, function(){$("#image_e_natural_minor").fadeIn(1000)});
}, //mouse over
function () {
$("#image_e_natural_minor").fadeOut(1000);
} //mouse out
); //hover close
Again: try this with a single image, and then rewrite it so it looks like:
$("#image_e_natural_minor").hide();
$("#hover_e_natural_minor").hover(
function(){showThis('#image_e_natural_minor')}, //mouse over
function(){hideThis('#image_e_natural_minor')} //mouse out
); //hover close
I think what you need is something like this. (In this example you also need to set the hover images to have class='hoverI'.)
var delayF = false,
mouseOn = null;
function setHandlers() {
$(".hoverI").hover(function() {
mouseOn = $('#' + event.target.id.replace('hover_e', 'image_e'));
if (!delayF) {
mouseOn.fadeIn(1000);
mouseOn = null;
}
}, function() {
var image = $('#' + event.target.id.replace('hover_e', 'image_e'));
if (mouseOn == image) mouseOn = null;
delayF = true;
image.fadeOut(1000, function() {
delayF = false;
if (mouseOn) {
mouseOn.fadeIn(1000);
mouseOn = null;
}
});
});
}
$("#image_e_natural_minor").hide();
$("#image_e_harmonic_minor").hide();
setHandlers();
There are three images that I have made a tooltip for each.
I wanted to show tooltips within timed intervals say for 2 seconds first tooltip shows and for the second interval the 2nd tooltips fades in and so on.
for example it can be done with this function
function cycle(id) {
var nextId = (id == "block1") ? "block2": "block1";
$("#" + id)
.delay(shortIntervalTime)
.fadeIn(500)
.delay(longIntervalTime)
.fadeOut(500, function() {cycle(nextId)});
}
now what i want is to stop the cycle function when moseover action occurs on each of the images and show the corresponding tooltip. And again when the mouse went away again the cycle function fires.
If I understand everthing correctly, than try this code. Tt stops the proccess if you hover the image and continues if you leave the image. The stop() function will work on custom functions if you implement them like the fadeOut(), slideIn(), ... functions of jquery.
$('#' + id)
.fadeIn(500, function () {
var img = $(this).find('img'),
self = $(this),
fadeOut = true;
img.hover(function () {
fadeOut = false;
},
function () {
window.setTimeout(function () {
self.fadeOut(500);
}, 2000);
}
);
window.setTimeout(function () {
if (fadeOut === false) {
return;
}
self.fadeOut(500);
}, 2000);
});