hi, could anyone help me to add a fade in to my script. i want to add it to the sideBarContents on clicking the sidebar tab but cant work out how to keep the current function (sliding into the screen on click) and fade in at the same time.

 

i'm slowly getting better but still get stuck alot and would be really greatful if someone could help me with this problem.

 

thanx, Andy

 

var isExtended = 0;

$(document).ready(function(){
$("#sideBarTab").click(function(){
		$("#sideBarContents").animate({
			"width":"toggle"},{duration:1500,queue:true,easing:'swing'}
		);

		if(isExtended==0){
			$('#sideBarTab').html($('#sideBarTab').html().replace(/(\.[^.]+)$/, '-active$1'));
			isExtended++;
		}
		else{
			$('#sideBarTab').html($('#sideBarTab').html().replace(/-active(\.[^.]+)$/, '$1'));
			isExtended=0;
		}
	}
);
});

if it helps here's the code i was trying to add to the .sideBarContents:

 

$(document).ready(function(){

$("#sideBarTab").click(function(){

$("div").fadeIn(3000, function () {

$("span").fadeIn(100);

});

return false;

});

    $('#elementID').click(function() {
     $('#fadeinElement').fadeIn('slow', function() {
       // Animation complete
     });
   });

yeah, thats pretty much what i'm looking for but i still have a hard time getting them to run together.

 

if i put it after my script it doesnt run; i could combine them if they were simple script but its the if( and else{ comands in my line that confuse me (lines 9 and 13) i dont know how to add your script without disrupting them

 

thanx for the reply tho, Andy

fair enough, try replacing this js

 

$(document).ready(function(){
$("#sideBarTab").click(function(){
$("div").fadeIn(3000, function () {
$("span").fadeIn(100);
});
return false;
}); 

 

with the one i gave you

 

    $('#elementID').click(function() {
     $('#fadeinElement').fadeIn('slow', function() {
       // Animation complete
     });
   });

Also, you may wanna look at the script:

 

$('#elementID').click(function() {

$('#fadeinElement').fadeIn('slow', function() {

// Animation complete

});

});

 

The bold is where you need to change

Can you post your html also, so I can see what your trying to do

sorry i think maybe i've not explained it well enough, i'm trying to combine Ash's fadeIn script with the script in post 1, below is what i have done..but it doesnt work. i've also tried adding the fadeIn at the bottom which makes the .fadeIn work but interferes with the original function.

 

var isExtended = 0;

$(document).ready(function(){
$("#sideBarTab").click(function(){
		$("#sideBarContents").fadeIn('slow', function() {
		$("#sideBarContents").animate({
			"width":"toggle"},{duration:1500,queue:true,easing:'swing'}
		);

		if(isExtended==0){
			$('#sideBarTab').html($('#sideBarTab').html().replace(/(\.[^.]+)$/, '-active$1'));
			isExtended++;
		}
		else{
			$('#sideBarTab').html($('#sideBarTab').html().replace(/-active(\.[^.]+)$/, '$1'));
			isExtended=0;
		}
	}
);
});

});

 

i'm not sure the html is needed (as i'm pretty sure its just my lack of java skills causing a prob) but here it is anyway:

 

//temp storage is used to convert html to text easily in javascript.
document.write("<div id=\"tempStorage\" style=\"display:none;\"></div>" +
	"<div id=\"sideBar\">" +
	"<a href=\"#\" id=\"sideBarTab\"><img src=\"sidebar/assets/slidebutton.gif\" alt=\"\" title=\"\"/></a>" +
	"<div id=\"sideBarContents\" style=\"display:none;\"><div id=\"sideBarContentsInner\">" 
	+

	"\n		 <br><br />	<h2> GIG<span>Calendar<\/span><\/h2>\n			            		<p> <br><br /><\/p>\n            <p> <\/p>\n			<p> <\/p>\n            <p> <\/p>\n       <p> <\/p>\n	   <p> <\/p>\n 		<descr"+"iption1>......<\/descr"+"iption1>\n    \n     	\n			<ul>\n			    <li><a href=\"http:\/\/........\/..........\">Gig Calendar<\/a><\/li>\n                <li><a href=\"http:\/\/portsmouth-students.com\/joomPO\/............\">Full Gig List<\/a><\/li>\n				<br><br />			<descr"+"iption2>.....<\/descr"+"iption2>\n                <li><a href=\"........">Local Band Directory<\/a><\/li>\n                \n						  <\/ul>\n			"

	+
		"<div id=\"scrollbar_container\">" +
			"<div id=\"scrollbar_content\">" +
			"</div>" +
		"</div></div></div></div>");

I wanted to see the html because I wasn't sure what you wanted

 

give this a try

 

$(document).ready(function(){ 
       $("#sideBarTab").click(function(){ 
					$("#sideBarContents").animate({opacity: 'toggle',width:"toggle"},{duration:1500,queue:false,easing:'swing'});



                       if(isExtended==0){ 
                               $('#sideBarTab').html($('#sideBarTab').html().replace(/(\.[^.]+)$/, '-active$1')); 
                               isExtended++; 
                       } 
                       else{ 
                               $('#sideBarTab').html($('#sideBarTab').html().replace(/-active(\.[^.]+)$/, '$1')); 
                               isExtended=0; 
                       } 
               } 
       ); 

});

yep thants got it, brilliant thanx very much guys

 

Andy