Develop Reference

jQuery click to fadeIn function not working

EDIT: Changed hover to click.
EDIT2: Ended up putting a 0.6 opacity copy div below it and applied the same animation and fadeOut to it, then made it fadeToggle on click which is working, but lags a bit. Any more efficient solutions are welcome!
I have a click function for a div element that's not working. I want the click to restore opacity to a previously faded element (that part works fine) but after hours of trying it's just not happening.
$(document).ready(function(){
$(document).scroll(function() {
$(".circle-nav-element-sm").animate({
left: '100px',
}, "slow");
$(".circle-nav-element-sm").fadeTo("slow", 0.6);
});
});
//Above part works fine.
$(document).ready(function(){
$(".circle-nav-element-sm").click(function() {
$(".circle-nav-element-sm").fadeIn("fast");
});
});
Can anyone see an obvious solution?

The jQuery fadeIn() method is used to fade in a hidden element.
At first make sure your circle-nav-element-sm div is hidden or not.If it is hidden it works for you if it is not please make sure it is hidden.

try using
$(document).ready(function(){
$(".circle-nav-element-sm").hover(function() {
$(".circle-nav-element-sm").fadeTo("fast",1);
});
});
I'm guessing fadeTo doesn't work well with fadeIn and fadeout
fadeIn vs fadeOut vs fadeTo

Effects on Jquery

I'm trying to do something like at this image, the main content goes up when I select another thing at the menu.
I know at a certain way how to do this, I'm using the same concept of a website with tabs, something like this:
$(function(){
$("#content:First").show();
$("#wrap a").click(function(){
$(".aba").hide();
var div = $(this).attr('href');
$(div).fadeIn('slow');
$('#menu li').css('background', '#03c0f3');
$(this).parent('li').css('background', '#2ADAF1');
return false;
});
I want to know what is the effect that I can apply to div(on the $(div).) to become like this, or if there is some better way to do this.

Like #d3c0y's idea why not make it a scrollable content and just slide to the contents on click().
$('nav a').click(function (e) {
e.preventDefault();
var div = $(this).attr('href'),
//get the contents offset top position
offsetTop = $(div).offset().top;
//animate scrolling to the contents
$('body, html').animate({
scrollTop: offsetTop
}, 'slow');
});
You can also apply some fading effects using fadeTo():
$(div).fadeTo('slow', 1).siblings().fadeTo('slow', 0);
You can also remove the scrollbar if you like to body {overflow:hidden;}, the scrolling/anchoring will still work.
See this jsfiddle.

I don't think there's any predefined function suiting your needs. You'd have to construct it by yourself using .animate(). It should look something like this:
$('#navigation a').click(function(){
$('#content').css({
position : 'absolute',
top : 0,
left : 0
}).animate({
top : -$('#content').height() - 1
}, 250, function(){
// Change content here
// Animate it back
});
});
Alternatively, what many other sites are using, you can deliver your entire content in a single page and scroll respectively (example). For that, have a look at different plugins, such as this one.

How can I ensure that my Submenu does not disappear when I hover out or add a delay before it disappears

I have a CSS3 Navigation Menu with no Javascript, I like how it is right now but there is one problem and the users are getting bothered with it.
The problem is that when a user hover over a Menu Link the submenu pops up which is exacly what I want but If user move the mouse arrow away from the submenu or the menu link, its dispairs ULTRA fast. It's very annoying and I have no Idea how to fix this, there is two solutions one way is to always show the submenu the other solution is that when a user hover out from the submenu the submenu should atleast wait 5-10 secs before disappearing and also if you hover out and hover back the submenu should stay. But I have no idea how to do it.
Here is the code and example try it out, any solutions is appreciated!
http://jsfiddle.net/nPdNd/ expand the result window in Jsfiddle to see the whole nav menu
Thanks in advance!

Example: http://jsfiddle.net/nPdNd/40/
Using jQuery
$(document).ready(function(){
var clearli;
$(".test").hover(function() {
clearTimeout(clearli);
$("ul#nav li").removeClass('current');
$(this).addClass('current');
}, function() {
var getthis = $(this);
clearli = setTimeout(function() {
$(getthis).removeClass('current');
}, 500);
});
});
Changed CSS
ul#nav li:hover > ul { to ul#nav li.current > ul {
ul#nav li:hover > ul li a { to ul#nav li.current > ul li a {
EDIT: I changed the selector due to a bug to .test and added class test to the <li>
EDIT2: I feel stupid, I forgot to stop the timeout counter. Edited above.

Multiple solutions exist to address your problem:
Use css-transitions to delay disappearance of your submenu (you mentioned in chat that you don't have access to stylesheets... maybe try using inline styling? It's not the best idea, but maybe you can live with it):
http://www.w3schools.com/css3/css3_transitions.asp
https://developer.mozilla.org/en/CSS/CSS_transitions
http://www.w3.org/TR/css3-transitions/
If you have jQuery, you can use .animate() to do
the same thing:
http://api.jquery.com/animate/
Take a look at .stop() too:
http://api.jquery.com/stop/
If all else fails, you can try playing around with setTimeout();
https://developer.mozilla.org/en/DOM/window.setTimeout
http://www.w3schools.com/js/js_timing.asp

this is ONLY an example - http://jsfiddle.net/nPdNd/22/
i would suggest you experiment yourself, until you get a desired result
this example is based on mouseenter/mouseleave events:
$("#nav li").mouseenter(function(){
$(this).children('#sub').show("slide", { direction: "up" }, 300);
});
$("#nav li,#sub").mouseleave(function(){
$(this).children('#sub').hide("slide", { direction: "up" }, 300);
});
it is also uses JQuery UI

Hop, here is your jsfiddle modified: http://jsfiddle.net/Ralt/nPdNd/25/
Now, as you can see, it's far from perfect. You shouldn't change the style property, but rather add then remove a class, but you get the idea of how to do that.

Please add this script in you page , This is easy way
Step 1-
Add comon jquery in you page
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
Step 1-
Add this script in your page -
<script type="text/javascript">
jQuery(document).ready(function() {
$('ul#nav li').hover(function()
{
$(this).find('ul').stop(true,true).slideDown()
},
function()
{
$(this).find('ul').stop(true,true).slideUp()
});
});
</script>
I do have little changes in your css
Demo http://jsfiddle.net/nPdNd/28/
your code (li:hover)not work ie6 , did u check it ?

Check it.... http://jsfiddle.net/lakshmipriya/nPdNd/31/
Is this speed is ok for you....

CSSS transitions would be the only way to do this with only CSS. Simply set the transition-delay, then no CSS change will take effect until the delay clock is done. The only problem with this is IE, which does not support CSS transitions.
https://developer.mozilla.org/en/CSS/transition-delay
Other than this you will need to resort to JavaScript based menus, implementations of which can be found all over the internet.

Jquery slide to visibility hidden?

I want to achieve something like :
$("#left").hide('slide', {direction: 'right'}, 1000)
However I do not want the div to be hidden I want it to keep up space so I want have the visibility hidden like:
$("#left").css('visibility','hidden')
Yet still achieve the same effect as above.

This is what I'd do
$parent = $('#left').parent(); //store the parent of the element in a variable
$('#left').clone() //clone the existing element
.appendTo($parent) // insert it into the current position
.css('visibility','hidden') //set it's visibility to hidden
.end().end() //target the initial element
.slideUp() //do any slide/hide/animation that you want here, the clone will always be there, just invisible
This could be horrible, but it's the only way I could think of solving the problem :)

EXAMPLE: http://jsfiddle.net/skyrim/j2RWt/4
Try this:
var $content = $("#left");
var offset = $content.offset();
$("<div></div>").css({
width: 0,
position: "absolute",
left: offset.left,
top: offset.top,
height: $content.outerHeight(),
backgroundColor: "White"
}).appendTo("body")
.animate({
width: $content.outerWidth()
}, 1000, function () {
$content.css('visibility', 'hidden');
$(this).remove();
});
EDIT
So, after learning what the actual need was (:p), this method basically place another div over the original element. I've tested it on IE...and I'll edit this with an update after I do further testing on other browsers!
EDIT
Only Chrome seems to be having an issue with getting the correct height.
Added a callback which removes the makes visibility hidden (as LEOPiC suggested) and removes the slideout div

You can do it in very simple way. There is really a nice tutorial here to animate in different direction. It will surely help you. try this
$('#left').animate({width: 'toggle'});
EXAMPLE : http://jsfiddle.net/2p3FK/2/
EDIT: One more solution, this is very simple to move the div out of window with left margin
$("#left").animate({marginLeft:'1000px'},'slow');
EXAMPLE : http://jsfiddle.net/2p3FK/1/

jQuery: resetting .animated divs position

I am using the following code to expand and center on div on :hover
$(document).ready(function(){
//animation on hover
$('#sliding_grid li').hover(function() {
$(this).addClass('highlight');
}, function() {
//$(this).removeClass('highlight');
});
$(".highlight").live("hover", function(){
$(this).animate({"width": "454px", "height":"282px", "top: ":"94px", "left":"152px", "margin-top: ":"-94px", "margin-left":"-152px"}, 500);
});
$(".highlight").live("mouseout", function(){
$(this).animate({"width": "148px", "height":"90px", "top: ":"0px", "left":"0px", "margin-top: ":"0", "margin-left":"0"}, 500, function(){
$(this).removeClass('highlight');
});
});
});
My problem is two things:
1) I'm not sure how to reset the "top" and "left" css coordinates to their original value on mouseOut. To see a working demo, go here:
http://jsfiddle.net/kTFvj/1/
2) The z-index (see here: http://jsfiddle.net/kTFvj/1/) is not affecting the :hovered grid elements. Not sure why.

You can use jQuerys .data method to store the original values and retrieve them on mouseout
I have made a modification to your original code that might work like you wish.. it uses .data and also updates the z-index so the active element is always on top
http://jsfiddle.net/kTFvj/2/

as Martin said, store the values when the animation begins using a variable, and restore when done.
about z-Index: just have a variable called maxZIndex=0
and everytime an animation begins, set the object's zIndex property to maxZIndex++

What about using % instead of pixels?
Another solution is saving the actual value of width and height in some vars and restoring on mouse out.