Editing JQuery/Ajax Effect

[efhx]

right now I almost have this script working the way I want it to, here it is:

var hash = window.location.hash.substr(1);
	var href = $('.workimg a').each(function(){
		var href = $(this).attr('href');
		if(hash==href.substr(0,href.length-5)){
			var toLoad = hash+'.html #selected';
			$('#selected').load(toLoad)
		}											
	});

	$('.workimg a').click(function(){
								  
		var toLoad = $(this).attr('href')+' #selected';
		$('#selected').slideUp('slow',loadContent);
		$('#load').remove();
		$('#wrapper').append('<span id="load">LOADING...</span>');
		$('#load').fadeIn('normal');
		window.location.hash = $(this).attr('href');
		function loadContent() {
			$('#selected').load(toLoad,'',showNewContent)
		}
		function showNewContent() {
			$('#selected').slideDown('slow',hideLoader);
		}
		function hideLoader() {
			$('#load').slideUp('slow');
		}
		return false;
		
	});

How it works is an image is clicked, and it fills the #selected div with content. The problem I'm having is the #selected div is always visible so the questions I have are
1. How do I get this to snap to the #selected Div and add a 1 second delay before the slideDown effect?
2. How do I get add a fade in effect so it becomes Opacity=0 -> slideDown -> Opacity=1 when it appears and Opacity=1 slideUp -> Opacity=0 when it transitions to the next?

[DanInMa]

you can use .delay() for the delay. but when using .delay never use the words "slow", "fast" etc for the animation speed, always set a numeric time or the delay will not work.

$('#selected').delay(1000).slideDown(1200,hideLoader);

for the other questions you need to use .animate()

  $('#selected').animate({
    opacity: 1,
    height: 'toggle'
  }, 1200, function() {
    // Animation complete. Do callbacks here
  });

[DanInMa]

also for your clickfucntion you shoudl use preventDefault() and not return false, because sometimes returnign false can add it's own complications.

$('.workimg a').click(function(e){
e.preventDefault();

do stuff
});

[efhx]

been trying this out for a little bit now.. will post code to make sure i did things right in a minute

[efhx]

you can use .delay() for the delay. but when using .delay never use the words "slow", "fast" etc for the animation speed, always set a numeric time or the delay will not work.

$('#selected').delay(1000).slideDown(1200,hideLoader);

for the other questions you need to use .animate()

  $('#selected').animate({
    opacity: 1,
    height: 'toggle'
  }, 1200, function() {
    // Animation complete. Do callbacks here
  });

I'm still really new to jQuery so it's alot of trial/error with what I tried to do.

var hash = window.location.hash.substr(1);
	var href = $('.workimg a').each(function(){
		var href = $(this).attr('href');
		if(hash==href.substr(0,href.length-5)){
			var toLoad = hash+'.html #selected';
			$('#selected').load(toLoad)
		}											
	});

	$('.workimg a').click(function(e){
	e.preventDefault();
								  
		var toLoad = $(this).attr('href')+' #selected';
		$('#selected').slideUp(1200,loadContent);
		$('#load').remove();
		$('#work').append('<span id="load">LOADING...</span>');
		$('#load').fadeIn('normal');
		window.location.hash = $(this).attr('href');
		function loadContent() {
			$('#selected').load(toLoad,'',showNewContent)
		}
		function showNewContent() {
			$('#selected').delay(50).animate({
    opacity: 1,
    height: 'toggle'
  }, 1200, function() {
    // hideLoader?
  });
		}
		function hideLoader() {
			$('#load').fadeOut('10');
		}
		
	});

The .animate seems to be working fine, but since the opacity isnt set to 0 before it scrolls down it just looks the same way it did before. How do I fix that? also where do i place the hideLoader function so the loading wheel stops spinning?

[DanInMa]

changes are in green. this might do it

var hash = window.location.hash.substr(1);
	var href = $('.workimg a').each(function(){
		var href = $(this).attr('href');
		if(hash==href.substr(0,href.length-5)){
			var toLoad = hash+'.html #selected';
			$('#selected').load(toLoad)
		}											
	});

	$('.workimg a').click(function(e){
	e.preventDefault();
								  
		var toLoad = $(this).attr('href')+' #selected';
		$('#selected').slideUp(1200,loadContent);
		$('#load').remove();
		$('#work').append('<span id="load">LOADING...</span>');
		$('#load').fadeIn('normal');
		window.location.hash = $(this).attr('href');
		function loadContent() {
			$('#selected').load(toLoad,'',showNewContent)
		}
		function showNewContent() {
                        $('#selected').css("opacity","0");
			$('#selected').delay(50).animate({
    opacity: 1,
    height: 'toggle'
  }, 1200, function() {
    hideLoader();
  });
		}
		function hideLoader() {
			$('#load').hide();
		}
		
	});

[DanInMa]

maybe you should run hideLoader() at the beginning of showNewContent() ?

[efhx]

How do I get it to jump to the #selected div?

It fades in from 0 opacity now, but is there a way to get it to scroll down first and then fade it in? Right now it does everything at once.

What im pretty much trying to do is use this for a portfolio so I can keep everything on the same page kinda like this website http://www.johnkarlsson.se

[DanInMa]

oh, well youd have to reference things by class instead of id and you would need to set the whole thing tot he hover event not the click event if you want it like that.

youd basically need to re-write most of this code and youd want to include samples of the html you are using. unfortunately I dont have time to go into that kind of detail right now

[efhx]

oh, well youd have to reference things by class instead of id and you would need to set the whole thing tot he hover event not the click event if you want it like that.

youd basically need to re-write most of this code and youd want to include samples of the html you are using. unfortunately I dont have time to go into that kind of detail right now

I would have to do all that to jump to the #selected div before it executes the rest or to slide it then change the opacity? Or for both?