We Keep Coding

jQuery - mouseenter / mouseleave with timer not functioning

What I am trying to do is only run my code when someone has hovered on an element for 1 second.
Here is the code that I am using:
var timer;
$(".homeLinkWrap").mouseenter(function() {
timer = setTimeout(function(){
$(this).find('.homeLinkNfo').removeClass('flipOutY').addClass('flipInY').css({opacity: '1'});
console.log('in');
}, 1000);
}).mouseleave(function() {
$(this).find('.homeLinkNfo').removeClass('flipInY').addClass('flipOutY');
console.log('out');
clearTimeout(timer);
});
The first part (mouseenter) IS NOT functioning and DOESN'T remove the class and then add the new one. The second one (mouseleave) IS functioning properly and DOES remove the class and add the new one.
I am guessing it is because I am targeting $(this) which is the current element being hovered over and since it is in a timer function jQuery doesn't know which element $(this) is referring to.
What can I do to remedy this?

I think it is because you are calling $(this) inside the setTimeout function. You need to do something like this:
$(".homeLinkWrap").mouseenter(function() {
var $self = $(this);
timer = setTimeout(function(){
$self.find('.homeLinkNfo').removeClass('flipOutY').addClass('flipInY').css({opacity: '1'});
console.log('in');
}, 1000);
});

Inside the setTimeout callback, this no longer refers to the jQuery selection. You should either keep a reference to the selection:
$(".homeLinkWrap").mouseenter(function() {
var $this = $(this);
timer = setTimeout(function(){
$this.find('.homeLinkNfo').removeClass('flipOutY').addClass('flipInY').css({opacity: '1'});
console.log('in');
}, 1000);
})
Or use an arrow function (ES2015)
$(".homeLinkWrap").mouseenter(function() {
timer = setTimeout(() => {
$(this).find('.homeLinkNfo').removeClass('flipOutY').addClass('flipInY').css({opacity: '1'});
console.log('in');
}, 1000);
})

The problem here is that the this inside the callback function that you're passing to setTimeout doesn't reference to the same point that the this outside the callback does.
There are some ways of solving your problem, I'll suggest you to use Function.prototype.bind to bind your callback function to the same this you have outside:
var timer;
$(".homeLinkWrap").mouseenter(function() {
timer = setTimeout((function() {
$(this).find('.homeLinkNfo').removeClass('flipOutY').addClass('flipInY').css({ opacity: '1' });
}).bind(this), 1000);
}).mouseleave(function() {
$(this).find('.homeLinkNfo').removeClass('flipInY').addClass('flipOutY');
clearTimeout(timer);
});

Execute .click(function () only first click

I trying to Execute given .click(function() only on first click, but it always Execute when click.
It's works when click .more-post-button it will add class loading to .main ul and show-more-post to .main li after that remove Class loading on setTimeout function 7 second.
JS:
$(".more-post-button").click(function () {
$('.main ul').addClass('loading');
$('.main li').addClass('show-more-post');
setTimeout(function(){
$('.main ul').removeClass('loading');
},7000);
});
My question is how to do this for only on first click, not every time click.
Thanks in advance.

Try:
$(".more-post-button").one("click", function () {
$('.main ul').addClass('loading');
$('.main li').addClass('show-more-post');
setTimeout(function(){
$('.main ul').removeClass('loading');
},7000);
});
http://api.jquery.com/one/
It'll handle it only once.

Why complicating things, try a simple closure on that. You won't pollute globale name space, too!
Demo goes here
(function(){
'use-strict';
var button = document.getElementsByTagName('button')[0];
var myHandler = function() {
var click = 0;
return function() {
if(click === 0) {
alert('single click');
}
click++;
}
}();
button.addEventListener('click', myHandler, false);
})();

I would use jQuery's .one() function. This attaches a handler that will only fire once.
Modified JS
$(".more-post-button").one("click", function () {
$('.main ul').addClass('loading');
$('.main li').addClass('show-more-post');
setTimeout(function(){
$('.main ul').removeClass('loading');
},1000);
});
Fiddle

Actually you can send in the addEventListener an option { once: true } to tell it to fire only once. So adding up to #fubbe and also using only javascript, it would be:
var button = document.getElementsByTagName('button')[0];
var handler = function () { alert('once click'); };
button.addEventListener("click", handler, {once: true});
Source :
MDN - addEventListener
webreflection - DOM Listener: capture, passive, and once

Use unbind in your function to remove all events
$(this).unbind();
From jQuery 1.7 .off is the recommended way
$(this).off();

save it in a variable:
var clicked = false;
$(".more-post-button").click(function () {
if(!clicked) {
clicked = true;
$('.main ul').addClass('loading');
$('.main li').addClass('show-more-post');
setTimeout(function(){
$('.main ul').removeClass('loading');
},7000);
}
});

jQuery - slideDown on mouseenter > delay > SlideUp on mouseleave

I have created a very simple jQuery sliding function that works, but requires improvements. The basic timeline of the function needs to:
SlideDown on mouseenter
Stay visible until mouseleave
When mouseleaves, delay the SlideUp by 2 seconds
^^This works, but if you slide up and down several times, the function stops working for a few seconds. Can anyone please suggest a solution? JS FIDDLE attached
JSFIDDLE: http://jsfiddle.net/lord_dev/b1g50eqk/4/
$(document).ready(function(){
$hover = true;
$( "#slide" ).mouseenter(function() {
if($hover) {
$( ".slide--hidden" ).slideDown('fast');
}
});
$( "#slide" ).mouseleave(function() {
$hover = false;
$( ".slide--hidden" ).delay(2000).slideUp('fast').queue(function(){
enableHover();
$(this).dequeue();
});
});
function enableHover() {
$hover = true;
}
});

Replace your javascript with this. It works great if i understood your problem correctly.
$(document).ready(function(){
var thetimeout;
$('#slide').mouseover(function() {
clearTimeout(thetimeout);
$('.slide--hidden').slideDown();
});
$('#slide').mouseleave(function() {
thetimeout = setTimeout(function() {
$('.slide--hidden').slideUp();
}, 2000);
});
});

Make lingering hover repeat action in jQuery

$('#test').hover(
function () {
$(this).append('Blah');
}
);
How can I make the jQuery repeatedly append Blah in #test based on how long you are hovering over #test?
For instance, how can I append Blah once every second you are hovering over #test?

You could use setInterval like this :
var myInterval = false;
$('#test').hover(
function(){
$that = $(this);
// need to save $(this) as 'this' will be different within setInterval
myInterval = setInterval(function(){
$that.append('Blah');
}, 100); // repeat every 100 ms
},function() {
clearInterval(myInterval); // clear the interval on hoverOut
}
);
Working example here

(function() {
var intv;
$('#test').hover(
function () {
var $this = $(this);
intv = setInterval(function() {
$this.append('Blah');
}, 1000);
},
function() {
clearInterval(intv);
}
);
}());
I've enclosed all the code inside a anonymous scoped function so to not pollute global scope, and I cached a reference to $(this) to avoid a new evaluation every second, inside the timeout

You can use setInterval to do so:
var appending; //var to store the interval
$('#test').hover(function(){ //on mouseenter
var $this = $(this); //store the context, i.e. the element triggering the hover
appending = setInterval(function(){ //the following function gets executed every second until the interval is cleared
$this.append('<p>Blah</p>'); //append content to context
},1000); //1000 meaning the repetition time in ms
},function(){ //on mouseleave
clearInterval(appending); //clear the interval on mouseleave
});

use setInterval()
$('#test').hover(
function () {
setInterval(function() {
$(this).append('Blah');
},1000)
}
);

Execution of function after 2 s

Below I have written a function for a hover element. I want this function is performed only when the mouse is on that part of 2 or more seconds. When they will be less or not at all this is not to make.
Below the code I wrote:
$(function(){
$('section.zespol_list ul li a').hover(function(){
$(this).next().fadeIn(1000);
},
function(){
$(this).next().fadeOut(1000);
});
});

You can use setTimeout to delay the execution and within that time if mouseout is fired clear the timer using clearTimeout.
$(function(){
var timeOutId;
$('section.zespol_list ul li a').hover(function(){
timeOutId= setTimeout(function(){
$(this).next().fadeIn(1000)
), 2000);
},
function(){
clearTimeout(timeOutId);
$(this).next().fadeOut(1000);
});
});

Use setTimeout() and clear it with clearTimeout()
var timer;
$(function(){
$('section.zespol_list ul li a').hover(function(){
timer = setTimeout(function() {
$(this).next().fadeIn(1000);
}, 2000);
},
function(){
clearTimeout(timer);
$(this).next().fadeOut(1000);
});
});

Actually there is a plug-in called HoverIntent. I haven't used it personally, but seems like it would solve your problem