We Keep Coding

(jQuery) Issue with fading in/out elements within .hover()

I'm having an issue trying to get .fadeIn(), .fadeOut(), and .hide() to behave properly when an element is hovered over.
Let's say I have a container, .post-box.
.post-box contains two divs: .description and .quote. The .quote div is initially hidden so that when .post-box is hovered over, it fades in and takes the place of the .description div, which gets hidden with .hide().
When .post-box is hovered out of, .quote fades out and .description is faded in again.
$(document).ready(function() {
var description = $('.description');
var quote = $('.quote');
var postBox = $('.post-box');
postBox.hover(function() {
$(this).find(description).clearQueue().stop(true, true).hide(0, function() {
quote.fadeIn(300);
});
}, function() {
$(this).find(quote).clearQueue().stop(true, true).fadeOut(300, function() {
description.fadeIn(300);
});
});
});
It seems that I've got this concept working fairly well except for one issue. If you quickly hover over .post-box, quickly hover out, and then quickly hover over again, you're presented with both the .quote and .description divs showing at the same time (see example screenshot here).
I thought I was preventing them from firing at the same time based on how my functions are set up, but I must be missing something important for this to be happening.
Here is my fiddle so you can see it in action.
Could somebody please lead me in the right direction?

My guess would be to also clear the animation queue for the quote element on hover.
$(this).find(quote).clearQueue().stop(true, true).hide();
I've updated the fiddle accordingly .

BUG with href containing Anchor #id - hits top of page for split second before jumping to Anchor

I have a bug in my site and I’m having trouble finding an elegant solution. I bet there’s a simple way to fix this .. I’m just not seeing it. I would appreciate any suggestions.
example: http://robbroadwell.com/portfolio/ios-apps/rainylectures/
The detail pages on my portfolio have a main nav and then below that a sub nav. If the user has scrolled down below the main nav where it’s out of sight, I’m using jQuery to append the href of the left/right arrows with an anchor tag so that the main nav is hidden on the page they navigate to.
The problem is about 25% of the time the browser hits the destination page at the TOP for a SPLIT SECOND before it jumps down to the anchor tag, so you see the top nav for just a second. It looks buggy and bad.
Thoughts… should I use CSS transitions to hide it? Should I pass a value in the URL and then pick up on it on the destination page to set the main nav to display: none, and then if the browser is at the top of the window and the user scrolls up, add it back in?
Any help would be appreciated!

You already pass a value in the url: #local-nav
I didn't test it... But I think this could work:
if(location.hash){
$(".navbar-absolute-top").css("visibility","hidden");
setTimeout(function(){
$(".navbar-absolute-top").css("visibility","visible");
},500);
}
-------
EDIT based on comment
Okay then...
What if you set the non-visibility in CSS?
.navbar-absolute-top{
visibility=hidden;
}
Then we decide when to set it visible.
If there a hash in the url ==> wait... If not ==> Don't wait!
;)
if(location.hash){
// Holds on before setting the main nav visible
setTimeout(function(){
$(".navbar-absolute-top").css("visibility","visible");
},500);
}else{
// Sets the main nav visible right now
$(".navbar-absolute-top").css("visibility","visible");
}
500ms may need to be adjusted
;)
-------
EDIT based on comment
About "choppy effect"... Maybe animate() will give a smoother effect using opacity:
body{
opacity=0;
}
if(location.hash){
// Holds on before setting the main nav visible
setTimeout(function(){
$("body").animate({"opacity":1},200);
},50);
}else{
// Sets the main nav visible right now
$("body").animate({"opacity":1},200);
}
to complete the effect... You should add a $("body").animate({"opacity":"0"},200); in a paddle-nav-item a .click() handler that will redirect on .animate callback:
$(".paddle-nav-item a").click(function(e){
// Hold the click event
e.preventDefault();
// Opacity effect
$("body").animate({"opacity":"0"},200,function(){
// Callback retreive the href and redirect AFTER the animation has completed
redirectTo = $(this).attr("href");
location.assign(redirectTo);
});
});
;)

how to remove hover on click

I'm working on a jQuery game. I have a 4 divs in a 2x2 design. The player needs to pick 1 option and verify with another button. The thing is, I have a hover effect adding a class which changes the background with a low opacity, and a click effect setting the background with a higher opacity. For divs 2, 3 and 4 it works fine - I hover and background changes color with opacity 0.3 and when I move the mouse out, it goes back to white. And when I click it, it changes the background to 0.4 and the hover doesn't affect them anymore. However, this is not working for the first div: the div changes background color on hover, but when I click it ,it keeps the hover color, and when I mouse out I see the click color, and every time I hover it changes the hover color again and so on.
Why is it happening only on div 1?
Code:
//hover effects
$(".respuesta1,.respuesta2,.respuesta3,.respuesta4").hover(
function () {
$(this).addClass("respuestahover");
},
function () {
$(this).removeClass("respuestahover");
});
//on click function for div1
$(".respuesta1").on("click", function () {
//if it hasnt been clicked, toogle class and change var to true
if (prendido1 == false) {
$(this).toggleClass("respuesta1b");
prendido1 = true;
//if any of the other divs are clicked by the time you are clicking unclicked 1, turn them off
if (prendido2 == true) {
$(".respuesta2").toggleClass("respuesta2b");
prendido2 = false;
}
if (prendido3 == true) {
$(".respuesta3").toggleClass("respuesta3b");
prendido3 = false;
}
if (prendido4 == true) {
$(".respuesta4").toggleClass("respuesta4b");
prendido4 = false;
}
//if is already clicked, turn off and change var to false
} else {
$(this).toggleClass("respuesta1b");
prendido1 = false;
}
});
The last part is repeated for every div "respuesta2", "respuesta3", etc..
Any idea?
EDIT
I was trying to clean up the code to make a jsFiddle and I think I got it to work:
http://jsfiddle.net/bqySN/2/
I'll just leave the code there if anyone is interested, be aware the code is unpolished and it need more generalisations.
EDIT 2
After some testing I actually found the problem:
if I alter the order of my css clases the app goes crazy:
This one is correct, with hover first
.respuestahover{
background-color:#f00;
opacity:0.2;
}
.respuestab{
background-color:#f00;
opacity:0.5;
}
This one is incorrect, hover second:
.respuestab{
background-color:#f00;
opacity:0.5;
}
.respuestahover{
background-color:#f00;
opacity:0.2;
}
I'm not really sure why it is behaving like that, but I'm glad I figure it out.

You are adding a class on hover... why would you do that via javascript if you can just use the :hover state from css? For example:
#foo .element p { color: red; }
#foo .element:hover p { color: blue; }
EDIT:
Sorry, I miss the original question.
If you want to remove the hover effect after clicking, you have lot of different ways to do this. You can remove the class defined with the hover via css, or if you want a jQuery solution you can use mouseenter/mouseleave with .on and then unbind with off.
See the following fiddle example.

You should simplify the bindings to just target them a little more generically, then remove the hover classes on all of them:
$(".respuesta").on("click", function (index) {
$(this).removeClass("hover");
// do other things
});
You can also use the index to find which number they are if they're in a list.
if you want the hover to not override the click, give the click an active class and tell the hovers to work on everything but them:
$('.respuesta:not(.active)').hover(function() {
// do something
}

jQuery Hover mouseenter mouseleave

i´m trying to do a hover effect using this script:
function itemhover(){
$(".item").mouseenter(function(){
$(".mask").fadeIn();
})
$(".item").mouseleave(function(){
$(".mask").fadeOut();
})
}
The problem is that when I hover over any item it fades in the .mask of all, how can I point the function to just work on the item that is being hovered?
Also when I pass the mouse in and out on the item real quick, the fade effects goes crazy, is like it doesn´t stop, then it stop after a while, why is that?
thanks

It sounds like your .mask element is contained within your .item element. If that is the case, then you can use $(this) to "set the scope" of the item being hovered (this refers to the item being hovered).
function itemhover(){
$(".item").mouseenter(function(){
$(this).find(".mask").stop(true, true).fadeIn();
})
$(".item").mouseleave(function(){
$(this).find(".mask").stop(true, true).fadeOut();
})
}
Also, you might want to chain .stop(true, true) before your fade animation effect to stop any previously queued animations and to jump to the end of the last queued animation.

you can use the this statement
$(".mask",this).fadeIn();

I want to have the top tab stay on when clicked

Hi I am using this menu found here:
http://www.sohtanaka.com/web-design/examples/horizontal-subnav/
Problem I am having is that I want to have the Top Nav stay when clicked and showing the subs also. I hope anyone can help me out!
The Top Nav should still be active when the new page is loaded. I know how to do this server-side but not client-side with JS/jQuery

With a quick view at the page source I find this jQuery code that handles the hover event:
$("ul#topnav li").hover(function() { //Hover over event on list item
$(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color + image on hovered list item
$(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
$(this).css({ 'background' : 'none'}); //Ditch the background
$(this).find("span").hide(); //Hide the subnav
});
If you want the subnav bar to stay visible after a click or something just create an if() statement within the 'hover out' function that checks if something has been clicked, i.e.
} , function() { //on hover out...
$(this).css({ 'background' : 'none'}); //Ditch the background
if(subnavclick==0){
$(this).find("span").hide(); //Hide the subnav
}
});
And within your subnav .click() function add the setting of the subnavclick variable like so:
$("span").click(function(){
subnavclick==1;
//do other stuff
});
This should work for you....

Try changing
$("ul#topnav li").hover(function() { //Hover over event on list item
$(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color + image on hovered list item
$(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
$(this).css({ 'background' : 'none'}); //Ditch the background
$(this).find("span").hide(); //Hide the subnav
});
to
$("ul#topnav li").click(function() { //Hover over event on list item
$(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color + image on hovered list item
$(this).find("span").show(); //Show the subnav
}

Instead of doing the effect on a mouseover event as stated in the script now, you should make it work on the click event.

Most of the js code is redundant as the functionality is provided by css anyway. Just add a "clicked" class that mimics the hover pseudo-class of the li's and add and remove this on click.
http://jsfiddle.net/VirusZ/THYsK/
Also you must update the z-indices so that the submenus appear on hover even with a clicked element visible.

To generalize, you'll need to do this in your CSS file and in the JS. You'll want to find ul#topnav li:hover{...} and clone it to something like ul#topnav li.active{...}. This is the class we will apply to the currently selected menu item.
ul#topnav li.current{
background: #f00 url(topnav_current.gif) repeat-x;
}
From there, it will depend on exactly how your site will work. Will each Tab bring you to a new page, or will clicking a tab trigger an ajax retrieval?
If you're using AJAX, you can capture the LI's click events to set a class. (LIVE DEMO). If you're going with a new page on every click, you will need to have JS parse the url and set the correct item's class using $(item).addClass('current');