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

Hide div after fading out using jquery, not before

I am trying to fade out a div using jQuery animate and chaining but need to hide the div after it fades out, not before. I'm currently using the function:
$('#loadhere').hide().stop().animate(
{
'opacity' : '0'
}, 500);
I tried putting .hide() after the animate but it still didn't work. I'm sure this is an easy fix but I'm just missing it today.

That's exactly what .fadeOut() does:
$('#loadhere').stop().fadeOut(500);

Use the complete callback provided by .animate()
$('#loadhere').stop().animate({
'opacity' : '0'
}, 500, function(){
$(this).hide()
});

$('#loadhere').fadeTo(500, 0, function(){
$(this).hide();
});

Calling both .hide() and .fadeOut() in succession is redundant -- both set the css property display:none when complete.
.hide()
The matched elements will be hidden immediately, with no animation. This is roughly equivalent to calling .css('display', 'none')
.fadeOut()
The .fadeOut() method animates the opacity of the matched elements. Once the opacity reaches 0, the display style property is set to none, so the element no longer affects the layout of the page.

Fade in selected div and set it on top of the others

I need to create a menu with divs on top of each other and when a div is clicked, I want it to be on top of the others.
Something very similar to this but when clicked, I want it to fade in on top of the other divs.
Any Ideas?
Thanks.

Something like this maybe. May need tweaking to suit.
DEMO
$("div").click(function(){
$("div").css("zIndex",1);
$(this).fadeOut('slow', function() {
$(this).css("zIndex",100);
$(this).fadeIn('slow');
});
});​

Could user animate to animate the opacity when it is on top: http://jsfiddle.net/bingjie2680/f9j9a/120/
$("div").click(function(){
$("div").css("zIndex",1);
$(this).css({"zIndex":100, 'opacity':0.4}).animate({'opacity':1}, 1000);
});​

This will work and also support adding and removing boxes on the fly (as opposed to the other answers) because of event delegation:
$("#container").on("click", "div", function(e) {
$("#container div").css("z-index", 0);
$(this).css({ "z-index": 10, "opacity": 0.4 })
.fadeTo(400, 1);
});
Optionally add .not($(this)) to $("#container div") to avoid changing the z-index to 0 for the currently selected box. But because we change it back to 10 on the line after it is not really necessary. Could be useful to avoid bugs if the code gets more complex in the future though.
Try it out here:
http://jsfiddle.net/BWABk/

Multiple hover instances jQuery

I have a div to animate from the top to the bottom of another div. I'm currently playing w/ mouseenter/leave and JS animations w/ easing where its original state is up/top. I want to hover/mouseenter and have it move down and stay down if I mouseleave/hover off. When I hover again it will animate back to the top/start.
I initially used mouseenter/leave which obviously doesn't do what I need as I would like the state to remain the same upon mouseleave. So what function would be best for this need? I'm still learning the terminology and am stumbling over how to better phrase the question.
Code:
function init() {
mouseenter: function(){
$(".ltrP").stop(true, true).animate({
marginTop:"170px"
},
{
duration: 1000,
easing: "easeOutBounce"
});
},
mouseleave: function(){
$(".ltrP").stop(true, true).animate({
marginTop: "0px"
},
{
duration: 1000,
easing: "easeInBounce"
});
}
});
}
window.onload = init;

I've edited your piece of code, see the comments for explanation:
$(document).ready(function(){ // Runs when document is loaded
$(".ltrP").mouseenter(function(){ // Mouseenter event on the given object (.ltrP)
var goTo = $(this).css("marginTop") == '0px' ? 170 : 0; // When the current margin-top is 0px animate to 170px, otherwise animate it back to 0px
$(this).stop(true,false).animate({ // Changed the stop(true, true) to stop(true, false), looks nicer in my opinion
marginTop: goTo // Animate to the just set variable
}, 1000);
});
});
And see here a demo: http://jsfiddle.net/hnDmt/
(And the easing "easeInBounce" was not working for me, so I removed it. (Maybe a jQuery UI easing?))

You can rewrite your code this way:
$(document).ready(function(){
init();
});
function init() {
$.hover(function(){
$(".ltrP").stop(true, true).animate({
marginTop:"170px"
},
{
duration: 1000,
easing: "easeOutBounce"
});
},
function(){
$(".ltrP").stop(true, true).animate({
marginTop: "0px"
},
{
duration: 1000,
easing: "easeInBounce"
});
});
}

There are lots of ways to do this. Maybe the easiest to to conceptualize is by adding a class to the animated item. You want to write two separate mouseenter functions.
For the first function, trigger your down animation, and add a class to the entered item. Call the class "moveddown" or something obvious.
Then, write a second mouseenter function. When an item with the class is mousentered, animate it up, and remove the class.
Forget about jQuery hover for this. It's just a wrapper for mouseenter/mouseleave. It can cause problems. The jQuery docs warn about it. It's usually better to write mouseenter and mouseleave functions separately, especially when you're trying to do something tricky, like this.

Jquery - fadeIn/fadeOut flicker on rollover

I am using the following code to acheive a fadeIn/fadeOut effect on rollover/rollout of it's parent div.
$('.rollover-section').hover(function(){
$('.target', this).stop().fadeIn(250)
}, function() {
$('.target', this).stop().fadeOut(250)
})
It works correctly when I rollover the div and out slowly. However if I move my mouse over and then off the div quickly, it breaks the effect. The target div seems to get stuck at an opacity between 0 and 1.
What confuses me is that when I use the following code it works perfectly.
$('.rollover-section').hover(function(){
$('.target', this).stop().animate({
opacity: 1
}, 250);
}, function() {
$('.target', this).stop().animate({
opacity:0
}, 250);
})
So, I have two questions.
1 - why is my first code block behaving as it does?
2 - What is the difference between fadeIn()/fadeOut() and animating the opacity?

As it was stated already it's because those modify the css and change the display to none. By using fadeTo you can get the same effect, but it doesn't modify the css, so it should work correctly.
update example: http://jsfiddle.net/TFhzE/1/
you can also do
$('.rollover-section').hover(function() {
$('.target', this).stop().fadeTo(0,250);
}, function() {
$('.target', this).stop().fadeTo(250,0,function(){$(this).hide();});
});
to completely hide it yourself once it actually is complete.

I've put my answer from the comments here:
Just use the animate example you have there. Check here for an answer to why the fade animation behaves the way it does:
jQuery fade flickers