We Keep Coding

Slide old page out as current page slides in

I'm using jquery on a single page web site to slide the next "page" onto the screen when the user clicks a button. I would like the current page to slide out to the left as the new page slides in from the right, so that there is no empty space shown, but currently I am only able to get the current page to disappear as the next page slides in. The code I'm using is here: http://jsfiddle.net/xoa029jz/5/
function slideToNext() {
var currentPage = $('.current-page');
var nextPage = getNextPage(currentPage.attr('id'));
$(nextPage).css('display', 'block');
$(currentPage).animate({left: '-100%'});
$(currentPage).removeClass('current-page');
$(nextPage).addClass('current-page');
$(nextPage).animate({left: '0%'});
}

Your CSS transitions are fighting with the jQuery animation. Until I hear which you prefer I have turned off the CSS transition.
The other fixes are to set the initial position of the elements about to animate and to wait for the panel to leave completely before removing the current-page class.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/xoa029jz/8/
function slideToNext() {
var currentPage = $('.current-page');
var nextPage = getNextPage(currentPage.attr('id'));
currentPage.css('left', '0%').animate({
left: '-100%'
}, function () {
currentPage.removeClass('current-page');
});
nextPage.css({'display': 'block', 'left': '100%'}).addClass('current-page').animate({
left: '0%'
});
}
I also cleaned up a few redundant items (chained selectors etc).
You are better off just using jQuery animation, initially while you get it working, then adding a plugin (like velocity.js) to make the animations use CSS transitions, rather than try to mix the two.

why the animation do not work properly in my slider?

I have a jQuery simple slider it has 15 picture each five show in a slide. I have a previous button and next button.
Each next click generate a left movement by 855px with a slider animation.
Each previous click generate a right movement by 855px with a slider animation.
This is my jQuery code :
$(document).ready(function(){
$(".prev_button").click(function(){
$("ul.slider").animate({
left: "+=855"
}, 3000, function(){
$("ul.slider").css('left', '0');
li_no = 0;
$("ul.slider").find("li").each(function(){
li_no = li_no + 1;
});
slide_after_this = li_no - 6;
$('ul.slider li:gt('+slide_after_this+')').prependTo('ul.slider'); // << line changed
});
});
$(".next_button").click(function(){
//alert($("ul.slider").css("right"));
$("ul.slider").animate({
right: "+=855"
}, 3000, function(){
//alert($("ul.slider").css("right"));
$("ul.slider").css('right', '0');
$('ul.slider li:not(:nth-child(n+6))').appendTo('ul.slider');
});
});
});
Now I have two problems :
First one is with the previous button (left arrow) When I click it the animation shows and the elements changed but they do not wrapped with each other (I mean does not show the last elements immidiatly before the first element). I can not find the reason of this.
Second problem is with both right and left arrows it is like following :
If I click just the right arrow the slider working fine it animates and change the elements but If I click the both button in order (I mean right then left or left then right ) the elements change but the animation does not show. but I check if the routine go inside the animate function by some alerts and it is going inside but does not animate on the screen .
This is a link that may help you:
http://jsfiddle.net/mpx83tpv/18/

you are really close try overflow:hidden for .slider_container
div.slider_container
{
height:380px;
width:855px;
margin-left:auto;
margin-right:auto;
overflow:hidden;
}
edit js:
also use below code as you are using both right and left in the end the slider has both of them one of them is always zero.
$(document).ready(function(){
$(".prev_button").click(function(){
$("ul.slider").animate({
left: "+=855"
}, 3000);
});
$(".next_button").click(function(){
//alert($("ul.slider").css("right"));
$("ul.slider").animate({
left: "-=855"
}, 3000);
});
});
if you want a infinite scrolling you need to use right and left in this case replace your $("ul.slider").css('right', '0'); line to $("ul.slider").css('right', ''); do same for left as well, as you need the remove them.
for adding the next visible div implement you logic before the animation as you callbacks do it after the animation.
the tricky part would be the prev button for this after calculation of the div count you also need the set new left without animation and then call left move animation.
hope these make sense.

Content Fade In over background

I'm working on this site: http://mccraymusic.com/newsite/ and I am having trouble figuring how to fade in the navigation bar correctly over the background AFTER the background has faded when clicking "enter site." I know the navigation bar isn't styled yet. I'm pretty sure I have the right code for the navigation to fade in. Just not sure how to make it work so it fades in when I want it.
Thanks

I suspect you need to use a callback in jQuery. Basically, the second function runs AFTER the first has completed.
http://www.w3schools.com/jquery/jquery_callback.asp

Here is a fiddle of it http://jsfiddle.net/YL4p7/
Fadein has a builtin callback, just add you animation into that callback and it will execute after the background has faded in.
also add relative position to #container so that it can be seen over the bg image.
$(function() {
var images = ["black.jpg","bg.jpg"];
$('<img>').attr({'src':'http://mccraymusic.com/newsite/assets/images/'+images[0],'id':'bg','alt':''}).appendTo('#bg-wrapper').parent().fadeIn(0);
$('.move').animate({
top:200,
left:250,
});
$('.entersite').click(function(e) {
e.preventDefault();
var image = images[1];
$('#bg').parent().fadeOut(200, function() {
$('#bg').attr('src', 'http://mccraymusic.com/newsite/assets/images/'+image);
$(this).fadeIn(1000, function() {
$('.navbar').fadeIn(1000);
});
});
$('.move').animate({"left": "-=50px", "top": "-=200px"});
});
});​

How to fadeout image, then make it appear on another position in jquery?

my image is at some div, and it's z-index is the highest
When i click on something, I want it to fade out, and fade in on another, specified position. Below the image of another class : ) It's an "aaa" class.
I was doing it like that:
$('img.classy').fadeOut();
$('img.classy').css('top',$(el).find('img.aaa:last').height()+60);
$('img.classy').fadeIn();
It's embedded to click event. When I run it and click the area, img.classy FIRSTLY changes it's position, then on new position it fades out and fades in. I want obviously to make it that way: fade out -> change position when invisible -> fadein on new position. how to do it?

This will do:
$('img.classy').fadeOut(function() {
$('img.classy').css('top',$(el).find('img.aaa:last').height()+60);
$('img.classy').fadeIn();
});
Because fadeOut and fadeIn are asynchronous functions, the script continues to run, those causing your img to change its position immediately.

You need to wait until the fadeOut is complete. I added a callback function for you.
$('img.classy').fadeOut('slow', function() {
$(this).css('top',$(el).find('img.aaa:last').height()+60);
$('img.classy').fadeIn();
});

this will clone the img, remove it and append it anothor wrapper:
.aaa {position: relative}
.classy {position: absolute; right:0; top:0}
$('img.classy').fadeOut(
cloned = $(this).clone(true);
$(this).remove();
$("img.aaa:last").append(cloned);
$(".classy").fadeIn();
);

jCarousel issue - Hover images opacity settings

So far I have got jCarousel to display, and load the images via a txt file,
What I want to do is show 4 images at a time, then when the user puts the mouse over 1 of the images the other 3 images to fade opacity, to 30%. Then if they move the mouse to the image next to it I want that image to be 100% opacity and the other 3 images 30% opacity.
So the image with the mouse over it will always be 100% opacity, and the others 30%, so it stands out. When the user moves the mouse out of the jCarousel box I want all images to show 100% opacity.
I'm using code similar to this
Thanks.
Edit
Sorry I should have added code before, here it is: http://pastebin.com/m54cd73d8
This is what I have so far nickrance.co.uk/jcarousel/dynamic_ajax.html
It kind of works, it fades the inactive images, but I think it needs a mouseout event to restore the opacity of all images when the mouse moves out of the jCarousel div.
Also, it seems to be only working for the first 4 images, and I have 10 images in the carousel, the others don't seem to do anything :s
New Current code:
So far
$(window).bind("load", function() {
var activeOpacity = 1.0,
inactiveOpacity = 0.3,
testOpacity = 0.3,
fadeTime = 50,
clickedClass = "selected",
thumbs = "#mycarousel li";
$(thumbs).fadeTo(1.0, activeOpacity);
$(thumbs).hover(
function(){
$(thumbs).fadeTo(fadeTime, inactiveOpacity);
$(this).fadeTo(fadeTime, activeOpacity);
},
function(){
// Only fade out if the user hasn't clicked the thumb
if(!$(this).hasClass(clickedClass)) {
$(this).fadeTo(fadeTime, activeOpacity);
}
});
$(thumbs).click(function() {
// Remove selected class from any elements other than this
var previous = $(thumbs + '.' + clickedClass).eq();
var clicked = $(this);
if(clicked !== previous) {
previous.removeClass(clickedClass);
}
clicked.addClass(clickedClass).fadeTo(fadeTime, activeOpacity);
});
});

You can add this code to yours and you will be fine:
$(".jcarousel-wrapper").on('mouseleave', function(){
$(thumbs).fadeTo(fadeTime, 1.0);
});
And your HTML must be something like this:
<div class="jcarousel-wrapper">
<div class="jcarousel">
<ul id="mycarousel">
<li>...
Then all images will fade opacity to 1 when mouse leave your carousel...