We Keep Coding

Timeout on mouse enter and leave

I have an unordered list, which changes position when hovering each child element. If I don't put a timeout on mouseover it jumps quickly through the list due to the position changing. What I've noticed is when hovering one li then jumping to the next li, the timeout doesn't finish. I have to leave the li element, wait then re-hover for the timeout to cancel.
I want to be able to hover each li element to update the ul position, but with a timeout so it's not constantly jumping through the list.
I'm open to other suggestions, if this isn't the best way around resolving this.
var time, allow = true;
$("ul").children("li").each(function(index) {
$(this).on('mouseover', function() {
if(allow == true) {
var i = index + 1;
var calc = $('ul').height() / $('ul').children("li").length * i;
$("ul").css('transform', 'translate(-50%, -'+ calc +'px)');
allow = false;
}
}).mouseout(function () {
time = setTimeout(function () {
allow = true;
}, 1000);
});
});
Update: When leaving the current element then hovering the next element the 'allow' isn't finishing the mouseout delay.
var time, allow = true;
$("ul").children("li").each(function(index) {
$(this).find('a').mouseover(function() {
if(allow == true) {
allow = false;
var i = index + 1;
var calc = $('ul').height() / $('ul').children("li").length * i;
$("ul").css('transform', 'translate(-50%, -'+ calc +'px)');
}
});
$(this).mouseout(function () {
time = setTimeout(function () {
allow = true;
}, 1000);
});
});

.bind() is deprecated, so if you dont have to for compatibility reasons, use .on() instead.
Nevertheless what you do is calling .mouseout() on the return value of bind(). There is no documented return value
for bind or on, so you should probably make a separate call like so and while your at it just use the shorthands mouseover() and mouseout() both times:
$("ul").children("li").each(function(index) {
$(this).mouseover(function() {
if(allow == true) {
// do stuff
allow = false;
}
})
$(this).mouseout(function () {
time = setTimeout(function () {
allow = true;
}, 1000);
});
});

jquery .hover() with else if statement

I want to put a little delay for onmouseout event for a group of sub items in a drop down menu. But I don't want to use css transitions.
I set it with .hover() and setTimeout method but I wanted to put it only for a specific elements in menu - in this case just for sub items so I used if else statement for them. I have no idea why this if else statement does't work.
Here is my javascript code:
var selectors =
{
element: '.main-menu li:has(ul)'
}
var opacityWorkaround = function ($element, value) {
$element.css('opacity', value);
};
var getAnimationValues = function (visible) {
var result = {
visibility: visible
};
result.opacity = visible === 'visible' ? 1 : 0;
};
var mouseActionHandler = function ($element, visible, opacityValue) {
$element
.stop()
.css("visibility", 'visible')
.animate(getAnimationValues(visible),
3000,
function () {
$(this).css("visibility", visible);
opacityWorkaround($(this), opacityValue);
});
};
var onMouseIn = function () {
var $submenu = $(this).children("ul:first");
if ($submenu) {
mouseActionHandler($submenu, 'visible', 1);
}
};
var onMouseOut = function () {
var $submenu = $(this).children("ul:first");
var $global = $('.global').children('ul');
if ($submenu) {
mouseActionHandler($submenu, 'hidden', 0);
} else if ($global) {
setTimeout(function() {
mouseActionHandler($global, 'hidden', 0);
},1500);
}
};
$(selectors.element).hover(onMouseIn, onMouseOut);
I put 1500ms delay and the $global variable is referring to sub items in menu that I want to make disapear with that delay. I wanted to achieve this when user move mouse cursor out of 'some items >' tab.
Here is my fiddle example.
http://jsfiddle.net/PNz9F/1/
Thanks in advance for any help!

In the example you have in your question $submenu always has a value so the else if statement is never run. You can check for a class instead.
var timeout;
var $submenu = $(this).children("ul:first");
var $global = $('.global').children('ul');
if ($(this).hasClass('menu-item')) {
mouseActionHandler($submenu, 'hidden', 0);
mouseActionHandler($global, 'hidden', 0);
clearTimeout(timeout);
} else if ($(this).hasClass('global')) {
timeout = setTimeout(function() {
mouseActionHandler($global, 'hidden', 0);
},1500);
}

you should be able to just use the :hover selector in your code to check whether the user is hovering over the element or not and run code accordingly

Add fade effect to jQuery image replace on hover script

There were a few topics about this already but they didn't quite help in my case. I've written a small script to change the image source of some social icons when hovered over. I'm trying to add a fadeIn and fadeOut effect so it isn't just a straight up image swap. Here is my script:
$(".social_icons").live('hover', function() {
if ($(this).attr("class") == "social_icons") {
this.src = this.src.replace("-black","-color");
} else {
this.src = this.src.replace("-color","-black");
}
$(this).toggleClass("on");
});
How can I add a fadeIn/fadeOut effect to this?

Try this
$(".social_icons").live('hover', function() {
var $curr = $(this);
if ($(this).attr("class") == "social_icons") {
$curr.fadeOut('slow', function () {
$curr.attr('src', this.src.replace("-black","-color"));
$curr.fadeIn('slow');
});
} else {
$curr.fadeOut('slow', function () {
$curr.attr('src', this.src.replace("-color","-black"));
$curr.fadeIn('slow');
});
}
$(this).toggleClass("on");
});

jQuery Tools Tabs Custom Animation

I''m using this library in my project : jQuery Tools Tabs, and from what I've read I can make my custom effect instead of having the default one.
I decided to have an effect like this one : Demo . And I found something that could be similar, but I'm having trouble implementing it.
$.tools.tabs.addEffect("subFade", function(tabIndex, done) {
var conf = this.getConf(),
speed = conf.fadeOutSpeed,
panes = this.getPanes();
var $tab = this.getCurrentTab();
if($tab.hasClass("current")){//Going AWAY from the tab, do hide animation (before the tab is hidden)
$(".tabs-tab").animate({"left" : "0px"}, 300, function(){//I was sliding it behind the tabs when not in use, replace with your own animation
panes.hide();
panes.eq(tabIndex).fadeIn(200, done);
console.log("Done done");
//This is then end of the chain - my animation, hide all then fade in new tab.
});
} else {//going away from any other tab
panes.hide();
panes.eq(tabIndex).fadeIn(200, done);
}
$tab = this.getTabs().eq(tabIndex);
if($tab.hasClass("current")){//Going to my special tab.
$(".tabs-tab").animate({"left" : "-160px"}, 300);//Sliding it out
}
// the supplied callback must be called after the effect has finished its job
done.call();
});
The above is what I have been trying but without success. So I was wondering if someone knows what I'm doing wrong and how can I make that custom effect behave like the demo ?

I have made a content slider similar to your example (however it does Not have FadeIn/Out functionality), but maybe with some modification of my code you can make that effect.Fiddle here
My full code:
$(document).ready(function() {
$('.slides div:not(:first)').hide();
$('.slides div:first').addClass('active');
//Put .active width in var
var activeWidth = $(".active").outerWidth();
$('.control p:first').addClass('current');
$('.control p').click(function() {
/*store P index inside var*/
var Pindex = $(this).index();
/* Store the slides in var*/
var slidePosition=$('.wrapper .slides div');
/* check if ACTIVE slide has GREATER index than clicked P TAG (CONTROLS)*/
if($(".wrapper .slides div.active").index() > $('.wrapper .slides div').eq(Pindex).index()) {
/*Show the slide equal to clicked P-TAG(CONTROLS)*/
slidePosition.eq(Pindex).show();
/*Add class "current" to the clicked control*/
$(this).addClass('current').prevAll('.current').removeClass('current');
$(this).nextAll('.current').removeClass('current');
$(".active").removeClass("active");
$(".slides").css({"margin-left":-activeWidth});
/*Start animation...*/
$(".slides").animate({marginLeft:activeWidth-activeWidth},1000,function() {
slidePosition.eq(Pindex).addClass("active");
$(".slides").css({"margin-left":"0px"});
$(".active").prevAll().hide();
$(".active").nextAll().hide();
});
}
if($('.slides').is(':animated')) {
return false;
}
if($(this).is($(".current"))) {
return false;
}
if($(".wrapper .slides div.active").index() < $('.wrapper .slides div').eq(Pindex).index()) {
slidePosition.eq(Pindex).show();
$(this).addClass('current').prevAll('.current').removeClass('current');
$(this).nextAll('.current').removeClass('current');
$(".active").removeClass("active");
$(".slides").animate({marginLeft:-activeWidth},1000,function() {
slidePosition.eq(Pindex).addClass("active");
$(".slides").css({"margin-left":"0px"});
$(".active").prevAll().hide();
$(".active").nextAll().hide();
});
}
});
$(".left").click(function() {
if($('.slides').is(':animated')) {
return false;
}
if($(".active").prev().length===0) {
//alert("no prev");
$(".active").nextAll().clone().insertBefore(".active");
$(".active").removeClass("active").prev().addClass("active");
$(".active").show();
$(".slides").css({"margin-left":-activeWidth});
$(".slides").animate({marginLeft:activeWidth-activeWidth},1000,function() {
$(".active").next().insertBefore($(".slides div:first")).hide();
var activeIndex = $(".active").index();
$(".active").nextAll().remove();
$(".current").removeClass("current");
//alert(activeIndex)
$(".control p").eq(activeIndex).addClass("current");
});
}
else{
$(".active").removeClass("active").prev().addClass("active");
$(".active").show();
$(".slides").css({"margin-left":-activeWidth});
$(".slides").animate({marginLeft:activeWidth-activeWidth},1000,function() {
var activeIndex = $(".active").index();
$(".active").prevAll().hide();
$(".active").nextAll().hide();
$(".current").removeClass("current");
$(".control p").eq(activeIndex).addClass("current");
});
}
});
$(".right").click(function() {
if($('.slides').is(':animated')) {
return false;
}
if($(".active").next().length===0) {
//alert("no next")
$(".slides div:first").nextAll(':not(.active)').clone().insertAfter(".active");
$(".slides div:first").insertAfter(".active");
$(".active").removeClass("active").next().addClass("active");
$(".active").show();
$(".slides").animate({marginLeft:-activeWidth},1000,function() {
$(".active").prev().hide().insertAfter(".slides div:last");
$(".slides").css({"margin-left":"0px"});
$(".active").prevAll().remove();
$(".current").removeClass("current");
var activeIndex = $(".active").index();
$(".control p").eq(activeIndex).addClass("current");
});
}
else{
$(".active").removeClass("active").next().addClass("active");
$(".active").show();
$(".slides").animate({marginLeft:-activeWidth},1000,function() {
$(".slides").css({"margin-left":"0px"});
$(".active").prevAll().hide();
$(".active").nextAll().hide();
$(".current").removeClass("current");
var activeIndex = $(".active").index();
$(".control p").eq(activeIndex).addClass("current");
});
}
});
});

jQuery toggleClass with direction and animation

I've followed a tutorial to add to my site a fixed header after scroll and the logo of the site appear on the fixed part.
That works, the code:
var nav_container = $(".nav-container");
var nav = $("nav");
var logo = $("logo");
nav_container.waypoint({
handler: function(event, direction) {
nav.toggleClass('sticky', direction=='down');
logo.toggleClass('logo_sticky', direction=='down');
if (direction == 'down')
nav_container.css({ 'height' : nav.outerHeight() });
else
nav_container.css({ 'height' : 'auto' });
});
});
How can I add a delay with fade-in to the logo, so it doesn't appear suddenly?
Versions I've tried:
logo.toggleClass('logo_sticky', direction=='down').delay(500).fadeIn('slow');
logo.delay(500).toggleClass('logo_sticky', direction=='down').fadeIn('slow');
(before the toggleClass)
logo.delay(500).fadeIn('slow')
logo.toggleClass('logo_sticky', direction=='down');
(after the toggleClass)
logo.toggleClass('logo_sticky', direction=='down');
logo.delay(500).fadeIn('slow')
To be honest I've tried every single combination that came to my mind lol
new version that I'm trying that don't work either:
$(function() {
var nav_container = $(".nav-container");
var nav = $("nav");
var logo = $("logo");
$.waypoints.settings.scrollThrottle = 30;
nav_container.waypoint({
handler: function(event, direction) {
if (direction == 'down'){
nav_container.css({ 'height':nav.outerHeight() });
nav.addClass('sticky', direction=='down').stop();
logo.css({"visibility":"visible"}).fadeIn("slow");
}
else{
nav_container.css({ 'height':'auto' });
nav.removeClass('sticky', direction=='down').stop();
logo.css({"visibility":"hidden"});
}
},
offset: function() {
return (0);
}
});
});
but if I instead of fadeIn put toggle it animes the change but in a bad direction (the img appear and then toggle to disapear)
thanks

http://api.jquery.com/delay/
http://api.jquery.com/fadein/
use $(yourLogoSelector).delay(delayAmount).fadeIn();
here is proof that it works http://jsfiddle.net/6d8cf/

It seems like the fadeIn only works if you don't have the css the property visibility: hidden, but display:none...
you can do a element.hide(); and then element.fadeIn().
since the hide() changes the layout of the page because it eliminates the item from it this is the solution I came across:
$(function() {
// Do our DOM lookups beforehand
var nav_container = $(".nav-container");
var nav = $("nav");
var logo = $("logo");
$.waypoints.settings.scrollThrottle = 30;
nav_container.waypoint({
handler: function(event, direction) {
if (direction == 'down'){
nav_container.css({ 'height':nav.outerHeight() });
nav.addClass('sticky', direction=='down').stop();
logo.css('opacity',0).animate({opacity:1}, 1000);
}
else{
nav_container.css({ 'height':'auto' });
nav.removeClass('sticky', direction=='down').stop();
logo.css('opacity',1).animate({opacity:0}, 1000);
}
},
offset: function() {
return (0);
}
});
});