FadeIn FadeOut draggables

[lktmaster]

Hola tengo un problema,
Estoy haciendo unas animaciones que necesitan un fadein, poder hacer zoom y que en el zoom no sean dragables todas las capas.

El problema és que el fadeIn lo tengo que poner en un div que haga zoom.

Mi pregunta primera se puede hacer un fadeIn de varios id a la vez?
porque cuando pongo un id para varias capas, y que hagan el fadeIn todas me las hace dragables porque no tengo otra... o quizas se podria poner una clase para el dragable que lo he probado pero no me funciona.

No se como hacerlo...

Código HTML:

<script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui.js"></script>
<script type="text/javascript" src="scripts/custom.js"></script>
<script language="JavaScript" type="text/JavaScript">

estado=0;
function zoom(multiple){
	if(estado==0){
		$('img[id^="img"]').effect("scale",{percent:(100*multiple)},1000);
		$('imgcos').css('cursor','hand');
		$( "#imgcos" ).draggable({ disabled: false });
		$( "#imgcos" ).draggable({containment: [-660,-475,31,0]});
		estado=1;
		arearedimension(multiple);
	};
}

function inici(multiple){
	if(estado==1){
		$("#imgcos").animate({top:"0px",left:"0px"},500,function(){
	
			$('img[id^="img"]').effect("scale",{percent:50},1000,function(){
				MM_showHideLayers('top','','show');
			});
		});
		$('imgcos').css('cursor','inherit');
		$( "#imgcos" ).draggable({ disabled: true });
		estado=0;
		arearedimension(multiple);
		
	}
}
function ensenyar(id){
	switch(id){

	}
	for(x=1;x<15;x++){
		$('#i'+x).fadeOut(500);
	}
	$('#'+id).delay(500).fadeIn(1000);
	
}


<div id="mapper" style="width:691; height:475px; overflow:hidden;left: 31px;position: absolute;top: 0px;">
	
	<div id="imgcos" style="width:691px; height:475px;">
           
		<div id="i4" style="display:none">
			<div id="base1" style="position:absolute; left: 0px; top: 0px; z-index: 3;"><img id="img2"  src="images/base/btr_b1.png" width="691px" height="475px"></div>
			
                         <div id="ia4" style="position:absolute; width:691px; height:475px; left: 0px; top: 0px; z-index: 5">
				<a href="#">
				<script >document.write('<IMG  id="img18" SRC="images/' + idlang + '/btr_i4.png" style="width:691px; height:475px;">')</script>
				</a>  
			</div>
            
                         <div id="ia9" style="position:absolute; width:691px; height:475px; left: 0px; top: 0px; z-index: 8">
				<a href="#">
				<script >document.write('<IMG SRC="images/' + idlang + '/btr_i9.png" style="width:691px; height:475px;">')</script>
				</a>  
			</div>
        </div> 

El id="ia9" no quiero que sea draggable y que no me haga el zoom que eso ya lo he conseguido.

Si alguien pudiera ayudarme se lo agradeceria muchisimo...

PD:estava pensando que quizas con un div no dragable dentro de uno dragable... no se como se haria esto.

[lktmaster]

Solucionado, por si a alguien le interesa aqui dejo la solución al problema.

Código HTML:

<script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui.js"></script>
<script type="text/javascript" src="scripts/custom.js"></script>
<script language="JavaScript" type="text/JavaScript">

estado=0;
function zoom(multiple){
	if(estado==0){
		$('img[id^="img"]').effect("scale",{percent:(100*multiple)},1000);
		$('imgcos').css('cursor','hand');
		$( "#imgcos" ).draggable({ disabled: false });
		$( "#imgcos" ).draggable({containment: [-660,-475,31,0]});
		estado=1;
		arearedimension(multiple);
	};
}



function inici(multiple){
	if(estado==1){
		$("#imgcos").animate({top:"0px",left:"0px"},500,function(){
	
			$('img[id^="img"]').effect("scale",{percent:50},1000,function(){
				MM_showHideLayers('top','','show');
			});
		});
		$('imgcos').css('cursor','inherit');
		$( "#imgcos" ).draggable({ disabled: true });
		estado=0;
		arearedimension(multiple);
		
	}
}
function ensenyar(id){
        for(x=1;x<15;x++){
		$('#ia'+x).fadeOut(500);
	}
	for(x=1;x<15;x++){
		$('#i'+x).fadeOut(500);
	}
        switch(id){
            case 'i4':
                ensenyar('ia9');
            break;
            

        }
        $('#'+id).delay(500).fadeIn(1000);

<div class="zoomer" style="width:691; height:475px; overflow:hidden;left: 31px;position: absolute;top: 0px;">
	
    <div id="imgcos" style="width:691px; height:475px;">
    
        <div id="i4" style="display:none">
            <div id="base1" style="position:absolute; left: 0px; top: 0px; z-index: 3;"><img id="img2"  src="images/base/btr_b1.png" width="691px" height="475px"></div>
			
            <div id="im4" style="position:absolute; width:691px; height:475px; left: 0px; top: 0px; z-index: 5">
                <a href="#">
		<script >document.write('<IMG  id="img18" SRC="images/' + idlang + '/btr_i4.png" style="width:691px; height:475px;">')</script>
		</a>  
            </div>
        </div>
   </div>
</div>

<div id="ia9" style="position:absolute; display:none; width:691px;  height:475px; left: 31px; top: 0px; z-index: 7">
	<a href="#">
	<script >document.write('<IMG SRC="images/' + idlang + '/btr_i9.png" style="width:691px; height:475px;">')</script>
	</a>  
</div>