how to hide a subnav menu until mouseover? - javascript

I'm working with a sub-navigation menu, where it animates the drop on mouseover. It's working great, except for that on the initial page load, the menu is showing by default. When you mouse over and out, it disappears as expected, but I can't figure out how to hide it on page load, and then make it appear on hover.
<script type="text/javascript">
function nav(){
$('.nav li').hover(function() {
$(this).find('ul:first').stop().animate({height: '200px', opacity: '100'}, {queue:false, duration:200, easing: 'easeInSine'})
}, function() {
$(this).find('ul:first').stop().animate({height: '0px', opacity: '0'}, {queue:false, duration:100, easing: 'easeInCirc'})
});
};
$(document).ready(function() {
nav();
});
</script>

Add a class to the submenu <ul>'s and add css rule to set display: none; For example:
<ul class="subMenu">
and
.subMenu { display: none; }

Related

Jquery showing and hiding div on .hover()

I am trying to use the .show("blind", "slow") Jquery-ui Effects and the .hide("blind", "slow") with .hover(). I would like to .hover() on the button and show the div, then by leaving the button I would .hide("blind", "slow"). The problem is if I leave to quickly and the div is not completely shown, then I will not go back to show to his full height once hovering back again.
This is my code and I include the js fiddle
HTML Code
<div id="state-slider">
My Slider
</div>
<button id="trigger">
Button
</button>
CSS Code
#state-slider {
position: fixed;
top: 50px;
left: -270px;
width: 500px;
min-height: 100px;
background-color: #ff9000;
}
Jquery
$(function() {
$("#trigger").hover(function() {
$("#state-slider").dequeue().stop().show("blind", "slow");
}, function() {
$('#state-slider').dequeue().stop().hide("blind", "slow");
});
});
Thanks a lot
Fabrizio
edit:
$(function() {
$("#trigger").hover(function() {
$("#state-slider").dequeue().stop(false, true).show("blind", "slow");
}, function() {
$('#state-slider').dequeue().stop(false, true).hide("blind", "slow");
});
try it this way, so it jumps to the end of any animation if you quickly hover over and back again

How to fade in a div on hover/mouseover using jquery?

I have a div that is set to display:hidden. I want this div to be set to display:block when a certain element (#navbar li a) is hovered over. Here is my javascript.
$('document').ready(function(){
$("#navbar li a").onmouseover(function{
$("#navbar ul").css("display","block");
});
});
I know that $("#navbar li a") is targeting the proper element, as I have tested this. Is there anything wrong with my javascript code?
edit: this is a dropdown menu. #navbar ul is a nested list.
Use .hover
$('document').ready(function(){
$("#navbar li a").hover(function(){
$("#navbar ul").css("display","block");
});
});
If you would like a fade in effect then just use .fadeIn
DEMO
$(function() {
$('#div1').hover(function() {
$('#div2').fadeIn();
}, function() {
$('#div2').fadeOut();
});
});
For completeness here's a CSS only method:
(FYI this using this method won't fade it as per say, just make it appear on hover and then disappear when not on hover.)
DEMO
#div2 {
width: 200px;
height: 200px;
background: red;
display: none;
}
#div1:hover ~ #div2 {
display: block;
}
There is no "onmouseover"
The right syntaxsis is:
$("#navbar li a").on("mouseover", function(){
$("#navbar ul").show() //Can use just show here
})
all the answers are show / hide . your code too.
Question is about fade in.
use .fadeIn() .fadeOut instead show hide
http://api.jquery.com/fadeIn/
Yes, there is something wrong with your code, jQuery doesn't have a onmouseover event, and what you're probably looking for is the mouseenter event, as mouseover fires continously on mousemove:
$(document).ready(function(){
$("#navbar li a").on('mouseenter', function(){
$("#navbar ul").show();
});
});
on the other hand, you could probably do this with just CSS ?
If you want the div to actually fade from opaque to 100% then you have start with opaque at say 80% (shown as 0.8) then fade to 100% (shown as 1.0). Since you want to start with a level of opacity the div needs to be hidden using "display none", the opaque level can then be set without the effect being seen, then make it visible and fade to 100%:
$("div.mydivclass").on("mouseenter", function () {
$(this).css("display", "none");
$(this).fadeTo("fast", 0.8);
$(this).css("display", "");
$(this).fadeTo("10", 1.0);
});

css transition on mouseover

I have the following css for my drop down menu in my banner:
#nav-menu li a
{
background-image:url('../images/menu_background.png');
background-repeat:repeat-x;
background-position: left top;
height: 35px;
}
#nav-menu li a:hover
{
background-image:url('../images/menu_background_hover.png');
background-repeat:repeat-x;
background-position: left top;
height: 35px;
}
It works fine, except that I would like some animation effect when I hover over the <li> tag. Currently, it just replaces the background colour of the <li> when i hover over it.
I tried the example code below which changes the margin-left of the li tag but I do not know how to animate the css transition on hover:
$j(document).ready(function () {
//When mouse rolls over
$j("#nav-menu li").hover(function () {
$j(this).filter(':not(:animated)').animate({
marginLeft: '9px'
}, 'slow');
},
function () {
$j(this).animate({
marginLeft: '0px'
}, 'slow');
});
});
Thanks a lot for any suggestion.
A quote from this post,
Blockquote
I guess you would have to work around this by not using genuine background-images, but div elements containing the image, positioned using position: absolute (or fixed) and z-index for stacking. You would then animate those divs.
Blockquote
I got this working by removing the j after the $ in the variable names.
Fiddle: http://jsfiddle.net/XjxBj/
$(document).ready(function () {
//When mouse rolls over
$("#nav-menu li").hover(function () {
$(this).filter(':not(:animated)').animate({
marginLeft: '9px'
}, 'slow');
},
function () {
$(this).animate({
marginLeft: '0px'
}, 'slow');
});
});​

Simple JQuery Fade In/Out

So what I'm trying to do is getting a div with an animation to show up only when I hover a button. I want that div to be invisible until the page hovers it, and I want it to go back being invisible once the mouse is no longer hovering the button.
Also, I want to do this with JQuery since I've kept far away from it for too long.
JQuery Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#about').hover(function(){
$('#about_hover').stop(true, true).animate({
width: '150px',
opacity: '0.8',
}, 300);
}, function(){
$('#about_hover').animate({
width: '0px',
opacity: '0',
}, 300);
});
});
</script>
HTML Code:
<div id="about_hover">
<img src="images/hover.gif">
</div>
<img src="images/menu/about.png">
<br>
CSS:
#about_hover {
text-align: right;
width: 150px;
float: left;
margin: 5px 0px 0px 100px;
overflow: hidden;
}
I'm getting a few problems though. First of all, the image inside the div loads up with opacity at 100% and only goes to 80% after I hover it for the first time. After that, it fades away like it's supposed to but it doesn't show up again when I hover the button.
Any thoughts?
Thanks
Thanks!
How about using fadeTo or fadeToogle ?
Here's a small snippet made using fadeTo: http://jsbin.com/agojux ?
you can have a look at it's source here
Here is your code, but a little bit modified:
JS:
$('#about_hover').width(0);
$('#about').hover(function(){
$('#about_hover').stop(true, true).animate({
width: '150px',
opacity: '0.8',
}, 300);
}, function(){
$('#about_hover').animate({
width: '0px',
opacity: '0',
}, 300);
});​
HTML:
<img src="http://www.placekitten.com/20/20/"><br>
<div id="about_hover"><img src="http://www.placekitten.com/80/80/"></div>
Honestly, it's probably best to use jQuery's on in this situation.. Your code would look something like this:
$("selector").on({
mouseenter: function () {
//fade in goes here
},
mouseleave: function () {
//fade out goes here
}
});
Hover is cool and all, but things can get messy with hover toggling. on makes this a snap. Also for your opacity's, I would probably use a fadeTo instead.
Here is the on documentation.

Jquery UI Tabs - slide

How can I switch tabs by sliding them horizontally? Currently I have:
$("#tabs").tabs({ fx: { height: 'toggle', opacity: 'toggle' } });
I'd like an effect similar to this.
Thanks!
Go to sprinkle.js and change highlighted to width:
$('#tabvanilla > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });

Categories