How do you make a .hover delay in jquery - javascript

I have a slider with thumbnails under the slides. I want to hover over the thumbnail image and change the slide. Is there a way to hover over a thumbnail img wait a second then change the slide to match the thumbnail?
$(function(){
$("#main-photo-slider").codaSlider();
$navthumb = $(".nav-thumb");
$crosslink = $(".cross-link");
$navthumb.hover(function() {
var $this = $(this);
theInterval($this.parent().attr('id').slice(1) - 1);
return false;
} );
theInterval();
});
This is what I have and it works but it doesn't have a 1 second time lapse

Try this.
$navthumb.hover(function() {
var $this = $(this);
setTimeout(function(){
$this.parent().attr('id').slice(1) - 1);
}, 1000);
return false;
} );

Related

Fading in changing background images

I have a script that switches between background images based on where I scroll. I am able to get the background images to switch correctly, but it's been requested that I have the background images fadeIn() instead of simply change. Basically, I'm looping through the background images and I want the previous one to fadeOut() and the next one to fadeIn(). Is it possible to do this? If so, how? Here's the script.
$("#scroll").on("slidestart", function(ev, ui){
$(this).on("mousemove touchmove", function(){
var slider_pos = $("span").offset().top;
$("#menu").find(".schematics").each(function(ev){
var schematic_id = $(this).data("id").split("_")[0];
var schematic_top = $(this).offset().top;
var schematic_height = $(this).height();
var schematic_bottom = (schematic_top + schematic_height);
var url = $(this).data("url");
Here's where the background images change. I thought adding fadeIn() after the css operation would work, but it doesn't.
if((slider_pos >= schematic_top) && (slider_pos <= schematic_bottom)){
$("#plane_image").css("background-image", "url(" +url +")").fadeIn("slow");
$(".vis").hide();
$(".title").hide();
$("#" +schematic_id +"_list").show();
$("#" +schematic_id +"_head").show();
}
})
})
})
jQuery's fadeIn and fadeOut functions have a "complete" function, which is called after the animation has completed. You could try something like this.
var slideTimeout; // global var for any slider timeout
if((slider_pos >= schematic_top) && (slider_pos <= schematic_bottom)){
if(slideTimeout) {
clearTimeout(slideTimeout); // clears the timeout if we detect a new slide movement.
}
slideTimeout = setTimeout(function(){
$("#plane_image").fadeOut("slow", function(){
$("#plane_image").css("background-image", "url(" +url +")").fadeIn("slow", function(){
$(".vis").hide();
$(".title").hide();
$("#" +schematic_id +"_list").show();
$("#" +schematic_id +"_head").show();
});
});
}, 1000); // it will wait 1 second before firing the method again
}
Or you could do it the boolean way.
var inVisibleRegion = false;
if((slider_pos >= schematic_top) && (slider_pos <= schematic_bottom)){
if(!inVisibleRegion) {
$("#plane_image").fadeOut("slow", function(){
$("#plane_image").css("background-image", "url(" +url +")").fadeIn("slow", function(){
$(".vis").hide();
$(".title").hide();
$("#" +schematic_id +"_list").show();
$("#" +schematic_id +"_head").show();
});
});
inVisibleRegion = true;
}
}
else {
inVisibleRegion = false;
}
For further insight, check out jQuery fadeIn() and jQuery fadeOut().
Start a fadeOut, then load the new img and call fadeIn, which fires on completion of the fadeOut (bg = your element)
bg.fadeOut('slow', function () {
bg.load(function () {bg.fadeIn();});
bg.attr("src", newbgdrc);
});

How to pause slideshow when hovering

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

Using setTimeout to display one image at a time

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();​

does jQuery stop() work on custom functions?

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

asd scroller - how to pause on hover JS/jQuery

I have a simple scroller for ads ;]
Need help whit pause it on hover.
$(document).ready(function(mnmTicker){
var mnmAdsInterval = 2000;
/* Do not modify code below */
var mnmAdsLenght = m3ads_numberadverts;
function mnmSlideAds(){
hT = $('.someClass').find('a');
hT2 = hT;
slideMargin = document.getElementsByClassName('a')[0].offsetHeight;
$(".someClass .a:first").clone().appendTo(".someClass");
$(".someClass .a:first").animate({"marginTop":-+slideMargin,},1800, function(){
$(this).remove();
});
};
var interval = setInterval(mnmSlideAds, mnmAdsInterval); [/code]
BTW. Im testing this:
$('.someClass .a').hover(function() {
clearInterval(interval);
}, function() {
interval = setInterval(mnmSlideAds, mnmAdsInterval);
});
but do not work ;/
You disabling only interval, but need to stop() animations too:
$('.someClass .a').hover(function() {
clearInterval(interval);
$(".someClass .a:first").stop();
}, function() {
interval = setInterval(mnmSlideAds, mnmAdsInterval);
});

Categories