We Keep Coding

How do I make a smooth transition when moving an element from margin-left:-9999px to the page?

Here's some more details - due to some weird restrictions with the YouTube API, I am forced to push a container off the page to give the impression of hiding the container.
I achieve this by using this class:
.my_hide{
margin-left:-9999px;
position:fixed !important;
}
And by using the JQuery methods $("player-list_container").removeClass("my_hide") and $("player-list_container").addClass("my_hide") to control the toggling.
However, the toggling looks jaunty, and the container jumps up once the class is removed. I want to be able to transition smoothly from one state to the other, and am at a loss for how to do it.
This behaviour can be demonstrated here
Add a video by typing in and searching for anything, and then hit the Play button located below. You should observe the behaviour described.

Iam assuming you 'are not able to'/'not want to' manually hide the container but want to change its position so that it is outside the boundaries of the page and it looks hidden.
In that case changing the position property will definitely give you a jumpy instead of a smooth effect since this affects the whole layout of the page (Read more). What you can instead do is change its position using CSS3 animation's translate property.
Here's a demo I've coded which does exactly what you want.
http://codepen.io/anon/pen/EgcIi
The "Click me" button toggles between taking the container off and on the page and it does it smoothly. You can also adjust the time which it takes to change the position of container. (As of now its 500ms)

I want it to look like the container is fading in in position meaning I would have to get the container to that position before using any type of animation function.
Then, don't throw the element way off the page with CSS. Leave it where it is, and hide it with .hide(). Then fade it in with .fadeIn().
You'll need to manually size the container, as it won't expand to contain a hidden element.

On my screen it just popped up. Im not 100% sure what type of pop in effect you want but that said, check out http://api.jquery.com/animate/
i was going to code up an example but that page has a bunch!
good luck!
PS: scroll down for all the visual animation examples.
Here is some sample code:
$('#myBtn').click(function(){
$( '.ytv' ).fadeTo( "fast", Math.random() );
//add animation code here;
});
check out a rough fiddle.
edit: heres a rough example: http://jsfiddle.net/somdow/Lef9n/2/
just click the red area to the right of the video

Animate function in jQuery wll help you

Expand one div to cover another div

I'm using jQuery to expand a div while hovering it so it covers the entire width of the page. It contains a large table and I'm required to build for a low resolution but in reality everyone has a higher so this is an accepted workaround. My problem is that the div "jumps" down below the other divs instead of covering them as I would like it to. Anyone know how this can be achieved?
I've created a jsfiddle of it so you get the main idea: http://jsfiddle.net/MRNxt/1/
Hover the grey box and make it expand to the right covering the #asd2 in the sidebar instead of below it.

Check this fiddle: http://jsfiddle.net/MRNxt/4/
The solution involves adding absolute positioning to the log div when expanding and taking it out when collapsing. Also included is a small fix to avoid flickering while animating.

Add this css:
#asd2{
position:absolute;
z-index:-1;
}
#log{
background:white;
}
Example: http://jsfiddle.net/MRNxt/2/

Is there a reason that using something like lightbox/thickbox isn't suitable?
Alternatively, you will need to play around with absolute positioning and z-index. I'd advise figuring out your ideal layout before working on the animation. Put it together in CSSEdit/Firebug/whatever so that your boxes are exactly where you want them to be and then it will be simple to add to the animation script.
Or just use an off-the-shelf lightbox.

This won't be the perfect answer:
http://jsfiddle.net/MRNxt/7/
but here I used a subContainer to allow you to have a 100% width and some border.

Change fixed div content/display at vertical points

I'd like to create a vertical website with multiple div's that appear at certain y-points on a website. These div's will host text. The position of these div's will always be fixed. 20% from the left and about 250px from the top.
What I want is to have the content of the div to display at certain vertical points on the page and disappear when I scroll down to the next description; only to have the next div appear straight after that. So that they have a quick transition from a to b.
A few good examples are:
Clicking on the links of this site makes the descriptions appear and they change on scroll: http://www.mattssonvandeneeden.nl/
The type in the centre: http://www.freetoair.org.uk/
The headings: http://www.formsofinquiry.com/
Can anyone point me into a particular direction or help me work out how it's done. I've looked at their code and still cant get it to work.

You can use jQuery's scrollTop(), fadeIn() and fadeOut() functions to achieve this. Depending upon the scroll placing you will show/hide relevant divs.
You can check this demo on jsFiddle.net.
Hope this helps you.

Change z-index of div with fade effect on mouse over

I have 4 images stacked on top of each other, see below:
I'm trying to achieve two things:
When the mouse is over an image that is in the background, that
image should come to the foreground with a fading effect. There is
also different text below each image, that text should come to the
foreground. (no fading needed there)
The result should be like this:
Every 10-15 seconds (without user input), the next image on the right should fade in
automatically.
Technically, I thought about putting each image and text into a separate div, and playing with the z-order. The fading effect could maybe be achieved using jquery, but I've not used that before, unfortunately.
Any example code, specific help or pointers is greatly appreciated.
Thanks!

Although it's impossible to control the fade of an element through his z-index
we can always trick what our eyes see.
DEMO GALLERY
To achieve that we can do:
Insert into our gallery a DIV element that will grab the src attribute of the current image and set it as his background image
hide the current image, position the DIV on this image .position()
fade our DIV in/out
reset image visibility
Let me know if you have some issues, I can comment my code to make clearer the steps I used.
Happy coding

Take a look at this plugin. Just explore it, this has got 100s of different effects which you might like to use in your case.
http://jquery.malsup.com/cycle/browser.html

A content rotator that moves vertically

Does anyone out there have a good example of a vertical content rotator in jQuery or Javascript? Especially ones with navigation arrows and thumbnails?
Most that I've seen are horizontal.

jCarousel will do this for you. Here's an example showing the vertical functionality (with arrows).

I'll make a suggestion for you. Create a div with a defined height and overflow set to hidden. Create another div inside the defined height div and place your content with it. Using the animate function of jquery, animate the child div upwards with marginTop or top with relative positioning. Use some creativity to make it pretty or dynamically load content.

If you really need a script i'll make one for you. But you can just get any horizontal carusel and change the left/right attributes with top/bottom (the ones in animation). Also jCarousel is a good example. (the one Andrew suggested).