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

Move block during his appearance

Here can be seen that the first block appears and then changes it's margin.
How can I make it so that these two events occurred simultaneously?
I'm tried to run this two functions simultaneously, but it did not work:
$(document).ready(function(){
$('#box1').fadeIn(2000);
$('#box1').animate({marginLeft: '100px'});
}); // end ready

As Felix Kling said, to make these animations happen at the same time, you should animate these boxes with opacity using the jQuery method .animate(). That way, you're making this all one animation instead of one animation and then another.
$(document).ready(function(){
//Hide these boxes not with display:none, but with opacity:0 and then change their opacity to 1.
$('#box1').animate({marginLeft: '100px', opacity: '1'}, 2000);
$('#box2').animate({marginLeft: '100px', opacity: '1'}, 2000);
}); // end ready
Here's the fiddle: http://jsfiddle.net/4BnG3/1/

Hide a div with opacity animate function

I am trying to hide a div with opacity animate function. Basically, I want the div to be hidden on click. But I want it to fadeout. Below is the code I have for it. can anyone help?
$("#div1").click(function() {
$(this).animate({ opacity: "0" }, 1000);
$("div").hide();
});
also, is it better to use fadeOut function instead of animate opacity?

fadeOut() is simpler because it will hide it for you automatically when it is done so you can save that code and it automatically waits for the animation to be done before hiding the element (something your current code was not doing).
$("#div1").click(function() {
$(this).fadeOut(1000);
});

Try this
JSFIDDLE
$("#div1").click(function() {
$(this).animate({ opacity: "0" }, 1000, function(){
$(this).hide();
});
});
Also you can use .fadeout(1000). to get same behavior.

You can use .fadeOut() API for this,
$("#div1").click(function() {
$(this).fadOut(1000);
});

jquery Flashes Div Element Before Executing .hide() and .fadeIn() Methods

This is my code:
$('.items').html(response).hide().fadeIn();
The problem is that when this loads, the page "jumps" up due to the element being rendered on page first (having a height) before the .hide().fadeIn() is triggered.. is there some other way to do this?

You could using the opacity instead if you want to keep the dimensions of the element intact:
$('.items').html(response).css({'opacity':0}).animate({'opacity':1});

Hide using CSS and then fade it in when required :
css :
.items {
display:none;
}
JavaScript
$('.items').html(response).fadeIn();

This is a cleaner solution since it avoids a flashing effect of the element being added first, then quickly having its opacity set to 0.
This way the elem is added already having an opacity of 0.
var elem = $(response).css({'opacity': 0});
$('.items').html(elem);
elem.animate({'opacity': 1});

If you want to show a smooth transtion between existing content and new, try the following:
$(function(){
$('.items').fadeOut(function(){
$(this).html(response).fadeIn();
})
});

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