We Keep Coding

Is it possible to have a div fade out, then fade in at different position when page load?

Is it possible to have a (first)div fade out, then fade in at the different place(second div) and (second)div should be fade in at the (first)div position
It'd obviously use the .fadeIn() and .fadeOut() functions but I'm not sure how divs fade in and fade out at the same time....
![enter image description here][1]

$("#div1").fadeOut(300,function(){ //hide first div
$("#div2").fadeIn(); //show second div when first div is fully hidden.
})
You can use callback of fadeOut() and fadeIn().

$("#div1").fadeOut()
$("#div2").fadeIn()
as you want to fade them at same time, call both functions at the same time.

Some of the previous answers will show the new div once the old has faded out. It sounds like you want the fading to happen at the same time. A solution to this would be to make sure div2 is positioned absolutely in the same place as div1 but with a lower z index so div1 completely overlays and hides it . Then as you fade out div1, div2 will fade in behind it.

jquery addclass to next div and remove it from actual div

I would need to implement some sort of news slider. this is how it should work:
a container div
3 absolute positioned divs with different z-index to have them stacked one on top of the other (the visibility should be one at a time)
a button which will add a class to the NEXT div in line (i will manage the visibility with css3)
here's my fiddle: http://jsfiddle.net/omegaiori/xqLXt/ and my actual js
var parentheight = $("#wrapper").parent().height();
$(".wrap").height(parentheight);
$('button.mybutton').click(function() {
$(this).next('div').addClass('next');
})
the actual js give the class .next to the first div .. what i want it do is to give the class "next" to the second div on the click of the button removing it from the first div. on the next click the class shall be removed from the second div and switched to the third.
if there's no more divs, it should go back adding it to the first one.
is it possible?
thank you so much guys! :)

Make fadeToggle more smooth when collapsing

When I click toggle the Toggle anchor in my jsFiddle: http://jsfiddle.net/KAAHM/ when the animation is complete, the collapsing of the remaining <li> is jarring and abrupt.
I was wondering if there was a quick way to make it smooth like: http://razorjack.net/quicksand/?
How the remaining items slide to their new spots rather than just collapse.
Don't think I have to keep fadeToggle but I would like it to fade and then disappear visibly, then physically.

I've updated your fiddle - http://jsfiddle.net/KAAHM/1/
Basic idea behind, is to apply width to parent li elements, fade out the anchors and then animate width of parent li elements down to zero, and finally remove those elements.
That way, the one element that stays put is smoothly placed near left edge of parent container.

fadeIn background image on click

I have a working code that changes my document background image when links in my navbar are clicked. The background image changes instantly with no animation. How could I make the new background image fadeIn(); ?
js
$('.navigation a').click(function() {
currentBg = $(this).attr('href').replace('#', '') +'.jpg';
$('.background').css({'background-image':'url(images/skins/'+currentBg+')'});
});

I don't believe you can, the only way (that I know of) would be to have a block element (div for example) which has the background and that appears behind the rest of your content (positioned absolutely) and fade that in instead of switching backgrounds.

You cannot animate the background image changing its opacity.
May be you can have a image with required opacity at different sections and then animate the background position so that it gives a fadeIn behavior.
Take a look at this link it will help you.

There is no possiblity to fade the background image, you have to create a container and set its background image to let it fade in and fade out.

I've done something like this before by floating a foreground image on a separate div on top of the background image you'd like to 'fade' in and then creating a jquery fade-out effect on the foreground image.
You can use a similar trick to set solid text on a semi-transparent "background".
http://css-tricks.com/non-transparent-elements-inside-transparent-elements/

I agree with int0x90.
What you can do is this:
Stack your images in a div, style position absolute, style of each image position absolute
set an id for the div
add a class active, with a z-index of 10
set all inactive images in div z-index to 0
you can use the z-index to pull the image with the highest z-index to the top of the stack
add class active to the on-click of nav bar link and remove this class from the previous on click so that the image's z-index is set back to 0 and not overridden.
in jquery, you may now be able to use opacity change and the speed of the change
hope this helps get you started!

As many others already said, it's impossible unless you use a block element as background.
But if you only want an animation, you could have a .gif as background then when it's animation has finished replace it with the real Image so the .gif doesn't iterate itself

Hover over a hidden element to show it

Is there any way to hover over an element that's already hidden. I am trying to mimic what Steam does with their arrow navigation on their home page. You'll notice that when you first get to the page, there are no arrows showing:
Then when you hover over the area where there should be an arrow, it shows itself:
I've tried setting my divs that contain the arrow images to display: none and have also tried visibility: hidden but neither seems to work with the hover or mouseover methods in jQuery. I would have thought visibility: hidden would make it work, but that doesn't seem to be the case. Is there any other way I can hide these divs from the start but still be able to have hover events work on them?

Set it to zero opacity instead:
$('#blah').hover(function() {
$(this).fadeTo(1,1);
},function() {
$(this).fadeTo(1,0);
});
http://jsfiddle.net/mblase75/bzaax/

You cannot hover over an invisible element or an undisplayed element. You can hover over a visible element and then use that to show a different previously hidden element. Or you can hover over a transparent element and make it opaque.
Here is an example of the opacity technique using just CSS, it would also work with jQuery's hover.
CSS:
#it {
opacity: 0;
width: 500px;
height:500px;
}
#it:hover {
opacity: 1;
}
Here is an example of showing one element when another is hovered over:
HTML:
<div id="me">Hover over me to display something else</div>
<div id="else">Something else</div>
jQuery:
$("#me").hover(function(){
$("#else").show();
},function(){
$("#else").hide();
});

Use the .fadeTo jQuery method to change the opacity of the element on hover state.
The jQuery site contains an example but something like this should suffice
$("element").hover(//On Hover Callback
function() {$(this).fadeOut(100);} ,
//Off Hover Callback
function() {$(this).fadeIn(500);})
From the jQuery Hover page.

You could set it to opacity: 0.
In order to make it cross-browser you probably would like to do it with jQuery tho.

One way to do this is by using an alternate hit-test div, such that it has no content, but when hovered over it shows the "arrow" div. When the "arrow" div (or the hit-test div) is exited, then the "arrow" div would be hidden once again.
Alternatively, you could use the same div for the hit-test and the "arrow", such that a background image is used for the visual elements of the div. When hovered, you could instruct the image's offset to be set to a position which would show the "arrow". When exited, you would set the offset of the background to a position where the arrow image would not longer be shown.
And, finally, if the content will always be in the same position as the hit-test area, you could set the opacity of the div to zero, and toggle accordingly.

You could set the opacity of the elements to 0. That would allow them to receive the hover events (actually mouseenter and mouseleave), but as a practical matter, make them invisible to users.