How can I switch from “show” and “hide” to “fadeIn” and “fadeOut”? - jquery

I want the content inside div ids (DIV1, DIV2 and DIV3) to show simultaneously every few seconds. I found the code here that does almost exactly what I want, but I want the transition between showing different DIVs to be somewhat gentler. I tried replacing show and hide with fadeIn and fadeOut with no luck. Any help appreciated.
$(function () {
var counter = 0,
divs = $('#div1, #div2, #div3');
function showDiv () {
divs.hide() // hide all divs
.filter(function (index) { return index == counter % 3; }) // figure out correct div to show
.show('slow'); // and show it
counter++;
}; // function to loop through divs and show correct div
showDiv(); // show first div
setInterval(function () {
showDiv(); // show next div
}, 10 * 500); // do this every 10 seconds
});

Related

jQuery hide image when I reach a div id

I am trying to hide an image after 3 seconds of hitting a div id. It appears my if statement is giving me major issues..
jQuery(document).ready(function($) {
var topOfDiv = $("#entering-div").offset().top;
$(window).bind('scroll', function() {
if ($(window).scrollTop() > topOfDiv) {
console.log("top of div reached");
setTimeout(function() {
$('#quote-image').fadeOut();
},3000);
}
});
});
Can't figure out why the if statement is not being triggered.
Console

Hover Menu From Non-Child Div

I have a div that I need to function like a hover menu. I cannot make it a child element (because of how I'm using it in a Wordpress theme). The li menu item that triggers the hover has an id of #menu-item-183. The div I need to appear is #const-training-menu.
I have the following code, which almost works.
//hides the div on page load
$('#const-training-menu').hide();
//show menu div when li is hovered
$('#menu-item-183').hover(function () {
$('#const-training-menu').show();
}, function () {
$('#const-training-menu').hide();
});
//keeps menu div visible when the menu div is hovered
$('#const-training-menu').hover(function () {
$('#const-training-menu').show();
}, function () {
$('#const-training-menu').hide();
});
However, this functionality is a little buggy. You have to move from the li item to the visible div very quickly and time it just right to keep it visible. I've tried adding a setTimeout to the hover hide to try to allow time to get to the div, but that doesn't seem to help or work. Any thoughts?
If you'd like to see this in development, visit http://naspweb.com/ and hover over the CONSTRUCTION TRAINING / CERTIFICATIONS menu option.
Edit
I tried this based on the suggestions below, but the submenu still doesn't stay visible.
$(document).ready(function () {
$('#const-training-menu').hide(); //initial hide
var isHovered = false;
$('#menu-item-183').hover(function () {
$('#const-training-menu').show();
}, function () {
if(isHovered)return; //allows other event handler to override this mouseout
setTimeout(function() {
$('#const-training-menu').hide();
}, 1000);
});
$('#const-training-menu').hover(function () {
isHovered = true;
$('#const-training-menu').show();
}, function () {
isHovered = false;
$('#const-training-menu').hide();
});
});
I would try to setup some kind of an override flag for the mouseout portion of the menu item event handler; something like this:
$(function(){
var isHovered = false;
$('#menu-item-183').hover(function () {
$('#const-training-menu').show();
}, function () {
if(isHovered)return; //allows other event handler to override this mouseout
$('#const-training-menu').hide();
});
$('#const-training-menu').hover(function () {
isHovered = true;
}, function () {
isHovered = false;
$('#const-training-menu').hide();
});
});
I haven't actually tested this but my only concern is the first mouse out could trigger before the flag is set. The timeout you mention would solve this issue if it does occur.

jQuery trying to stop the new hover running till the previous is finished

Currently my jQuery code below opens and closes a submenu when its parent is hovered. But my only problem is when I mouse over another top level item the opened submenu starts to close and the submenu for the item I am now hovered starts to slide down, so there are partially 2 submenu's open.
How could I achieve it so that the new submenu would only open only after the previous one has finished closing? The effect I would want ideally would be one like this plugin here
jsFiddle
var sub_menu = $('.main-menu .sub-menu');//select all sub menus
$('.main-menu > ul > li').hover(function () {
sub_menu.stop(true, true); //use stop on all submenus
$(this).find('.sub-menu').slideDown('slow');
}, function () {
sub_menu.stop(true, true);//use stop on all submenus
$(this).find('.sub-menu').slideUp('slow');
});
Have a look at this code. It will accomplish delayed animation and also removes repeated animation
var still;
$('#test').hover(function () {
var that = $(this);
if (!still) {
still = true;
window.setTimeout(function () {
if (still) {
that.animate({
'width': 200
}, 100, function () {
still = false;
});
}
}, 100);
}
}, function () {
still = false;
$(this).animate({
'width': 100
}, function () {
});
});
Check here
You could add a class to the currently active submenu to prevent the other submenu from firing. Remove the class on callback.

show hide image inside div

var hide = false;
$(".list_rowtext").hover(function () {
if (hide) clearTimeout(hide);
$(this).children("img").fadeIn();
},
function () {
hide = setTimeout(function ()
{ $(this).children("img").fadeOut("slow") }, 250);
});
.list_rowtext is a div tag. Actually what I want is that when I hover on div, image displays and when mouse focus removed then image disappears and this div tag is inside listview itemtemplate, means its repeating.
It is displaying image when I hover mouse on div but image didn't disappear when mouse focus is removed from that div.
A setTimeout-function is always executed in global scope, so this is window when the function gets executed.
Use a closure to point at the desired target:
$(".list_rowtext").hover(
function () {
if (hide) clearTimeout(hide);
$(this).children("img").fadeIn();
},
function () {
var obj=this; //closure
hide = setTimeout(function ()
{ $(obj).children("img").fadeOut("slow"); }, 250);
}
);

Hover fadeIn, repeating

When a user hovers over div1: -
div1 and div2's contents fadeout
div1 loads some new content
div2 fades in div1s existing content
This is where I want this to stop.
However, when the new contents of div1 load, the hover event triggers again, and this continues.
how can i make it so after the initial hover event, the hover event wont occur again until the user has removed the cursor and hovered again on div1?
hope this makes sense, cheers in advance!
$('document').ready(function () {
//For each small block
$('#div1').hover(function () {
var thisWish = $(this).html();
var nextWish = $('#wishy1').html();
//Fade the small block out bring in a new wish
$(this).fadeOut(1200, function () {
$(this).html(nextWish).fadeIn(1200, function () {
});
});
//Fade the large block and and bring in the small blocks wish
$('#div2').fadeOut(1200, function () {
$('#div2').html(thisWish).fadeIn(1200, function () {
});
});
},
function () {
// hover out
});
});
Since you're not using the second event of the hover, use mouseover instead:
$('document').ready(function(){
//For each small block
$('#div1').mouseover(function(){
var thisWish = $(this).html();
var nextWish = $('#wishy1').html();
//Fade the small block out bring in a new wish
$(this).fadeOut(1200, function(){
$(this).html(nextWish).fadeIn(1200, function(){
});
});
//Fade the large block and and bring in the small blocks wish
$('#div2').fadeOut(1200, function(){
$('#div2').html(thisWish).fadeIn(1200, function(){
});
});
}
})

Resources