Develop Reference

Mouseover for 1 second before triggering the event

I've written a simple bit of code that shows a div on a mouseover event. I'd like to mouseover the element for 1s before the event takes place. Any ideas on how I can achieve this? with a brief explanation if possible so I know for next time.
$('.NavSelect h2').mouseover(function() {
$('.NavGroup').hide();
$('#' + $(this).prop('id').replace('item','content')).show();
});

It's probably best to keep this timeout in a data property and clear it on mouseout.
$('.NavSelect h2').mouseenter(function () {
$(this).data('timeout', setTimeout(function () {
$('.NavGroup').hide();
$('#' + $(this).prop('id').replace('item','content')).show();
}, 1000));
}).mouseleave(function () {
clearTimeout($(this).data('timeout'));
alert('mouse left');
});

If I understand what you want to do, you need a setTimeout:
$('.NavSelect h2').mouseover(function() {
setTimeout(() => {
$('.NavGroup').hide();
$('#' + $(this).prop('id').replace('item','content')).show();
}, 1000);
});
Here, the documentation
Update
If you would clear the timeout on mouseleave I suggest you somethig like this:
let time = 0;
$('.NavSelect h2').mouseover(function() {
time = setTimeout(() => {
$('.NavGroup').hide();
$('#' + $(this).prop('id').replace('item','content')).show();
}, 1000);
}).mouseleave(() => { clearTimeout(time); });

Chaining methods in jquery [duplicate]

This question already has answers here:
Jquery delay execution of script
(2 answers)
Closed 4 years ago.
I'm trying to make an animation by adding a class pressed then wait for 100ms then remove the class.
when I just add the class
$("#" + currentColor).addClass("pressed");
the code works fine. But when I chain the methods or write them separately none of the methods work.
$(".btn").on("click", function () {
var userChosenColor = $(this).attr("id");
animatePress(userChosenColor);
});
function animatePress(currentColor) {
$("#" +
currentColor).addClass("pressed").delay(100).removeClass("pressed");
}
I expect it to add the class pressed then wait 100ms then remove the classpressed. But it doesn't do anything. I also don't get any error report in the console

That is because the delay method only delays effects, such as fadeIn. It will not delay adding or removing classes. You should use setTimeout for that.
$(".btn").on("click", function () {
var userChosenColor = $(this).attr("id");
animatePress(userChosenColor);
});
function animatePress(currentColor) {
$("#" + currentColor).addClass("pressed");
window.setTimeout(function () {
$("#" + currentColor).removeClass("pressed");
}, 100);
}

You can use setTimeout() method for delaying the second action.
Your code should be like this:
$(".btn").on("click", function () {
var userChosenColor = $(this).attr("id");
animatePress(userChosenColor);
});
function animatePress(currentColor) {
$("#" + currentColor).addClass("pressed");
setTimeout(function(){
$("#" + currentColor).removeClass("pressed")
},100)
}

jQuery: fire call on fadeIn function

I'm currently using the ImageZoom plugin (view here), the plugin is great and works a charm. But for a site I'm working on the images (that you need to zoom into) are being appended to their container via $("CONTAINER_CLASS_HERE").html('...etc, thus aren't present on load (this function needs to stay too), this means though that the ImageZoom() function isn't working, even when calling it inside the fadeIn function.
jSFiddle demo here: http://jsfiddle.net/y2tdaak2/
jQuery:
$(document).ready(function () {
$('.single-letting-lightbox-image').ImageZoom();
$("button").click(function () {
var imgUrl = $(this).data('rel');
$("#area").fadeIn();
$(".single-letting-lightbox-image-wrap").html("<img src='" + imgUrl + "' class='single-letting-lightbox-image' />")
.hide().imagesLoaded(function () {
$(this).delay(500).fadeIn(500, function () {
$(this).ImageZoom();
});
});
});
});
Any suggestions on how to get this to work would be greatly appreciated, can't figure it out!

Here you are a working solution :) http://jsfiddle.net/y2tdaak2/1/
$(document).ready(function () {
$("button").click(function () {
var imgUrl = $(this).data('rel');
$("#area").fadeIn();
$(".single-letting-lightbox-image-wrap").html("<img src='" + imgUrl + "' class='single-letting-lightbox-image' />")
.hide().imagesLoaded(function () {
$(this).delay(500).fadeIn(500, function () {
$('.single-letting-lightbox-image').ImageZoom();
});
});
});
});
You need to call ImageZoom after the image is loaded :)

have you tried to callback the function?
$("button").click(function () {
var imgUrl = $(this).data('rel');
$("#area").fadeIn();
$(".single-letting-lightbox-image-wrap").html("<img src='" + imgUrl + "' class='single-letting-lightbox-image' />")
.hide().imagesLoaded(function () {
$(this).delay(500).fadeIn(500, function () {
$(this).ImageZoom();
});
});
// callback the function to make it work again since the way you do this is not yet loaded
$('.single-letting-lightbox-image').ImageZoom();
});

Prevent jquery fadeIn many times

Need to prevent the emergence of tips several times (when not a single clue pointing at a link persists even if the cursor is not on a link).
$(function () {
$(".area_tooltip").mouseover(function () {
var tooltip = $("div#" + $(this).attr("id") + "");
tooltip.fadeIn();
}).mouseout(function () {
var tooltip = $("div#" + $(this).attr("id") + "");
tooltip.fadeOut();
});
});
To understand the problem to move the red square over several times, and then remove it in the direction
http://jsfiddle.net/8LnTC/1/
I apologize for my bad English

You need to stop any queued animations first...
$(function () {
$(".area_tooltip").mouseover(function () {
var tooltip = $("div#" + $(this).attr("id") + "");
tooltip.stop().fadeIn();
}).mouseout(function () {
var tooltip = $("div#" + $(this).attr("id") + "");
tooltip.stop().fadeOut();
});
});
Working jsfiddle example...
Incidentally, you shouldn't have multiple elements with the same ID. You need to rethink how you're going to relate the elements to each other - maybe use data attributes.
Here's a suggested alternative...
Working jsfiddle example...
HTML change
<a class="area_tooltip" data-associated-tooltip="item_1">show</a>
Javascript change
$(function () {
$(".area_tooltip").mouseover(function () {
var tooltip = $("div#" + $(this).data("associated-tooltip"));
tooltip.stop().fadeIn();
}).mouseout(function () {
var tooltip = $("div#" + $(this).data("associated-tooltip"));
tooltip.stop().fadeOut();
});
});
You put the tip's ID in the attribute data-associated-tooltip and then you can access that with $(this).data("associated-tooltip"). That will get rid of any ID conflicts which will most likely cause untold problems.

jQuery show() and hide() aren't working

I'm working on sliding old questions to the left and new questions in from the right. You can see what I'm doing in this jsFiddle:
jsFiddle
$(document).ready(function () {
//$('ul').roundabout();
$("#question2").hide();
$("#question3").hide();
var x = 1;
$("input[type='radio']").change(function () {
var selection = $(this).val();
//alert("Radio button selection changed. Selected: " + selection);
$("#question" + x).hide("slide", {
direction: "left"
}, 800);
x++;
$("#question" + x).show("slide", {
direction: "right"
}, 800);
});
});
But when I'm working outside of jsFiddle (mostly because it won't load the roundabout.js file from GitHub correctly) I can't seem to get the show() and hide() to work correctly. I have the exact same code (with a reference to roundabout.js uncommented), and it will completely ignore the first hide and show references, then skip the next hide command and show the next question.
Any ideas on why it wouldn't be firing the hide() and show() functions in the click event?
EDIT: Editted with most current jsFiddle. It works there, but not outside of that environment.

Bind the event inside the DOM ready event
If you inspect the source in jsFiddle, you see all your code enclosed in the DOM ready event . So it looks like it works here and not on your local version.
$(document).ready(function () {
//$('ul').roundabout();
$("#question2").hide();
$("#question3").hide();
var x = 1;
$("input[type='radio']").change(function () {
var selection = $(this).val();
//alert("Radio button selection changed. Selected: " + selection);
$("#question" + x).hide("slide", {
direction: "left"
}, 800);
x++;
$("#question" + x).show("slide", {
direction: "right"
}, 800);
});
});

This approach doesn't use jQuery UI and is also different than yours, but you'll still get the same end result. Note that the HTML/CSS are also different in this approach.
Working example: JSFiddle.
$(document).ready(function () {
var x = 1,
distance = $('.container').width(),
qNumber = $('.question').length;
$('.questionList').width(distance*qNumber);
$("input[type='radio']").change(function () {
alert( "Radio button selection changed. Selected: " + $(this).val() );
$('.questionList').animate({'margin-left':'-='+distance+'px'}, 500);
});
});