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
- How do I get this to snap to the #selected Div and add a 1 second delay before the slideDown effect?
- 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?