jquery se demora en realizar una animación despues de otra

Buenos dias amigos, soy novato en jquery, apenas voi por selectores pero necesito ayuda urgente. Tengo las animaciones con selectores, y necesito la misma animacion para diferentes identificadores, el problema es que cuando ejecuto una animación la realiza inmediatamente, pero cuando quiero ejecutar otra, el tiempo que se dmeora es mucho y hay que esperar. necesito solucionar este error de codigo, se que es de optimización y se hace con variable. aqui les dejo el codigo:

Código Javascript :

$(function(){
$('#btn-desarrolloweb-ver-mas').click(function() {
  $('#desarrollo-web-contenido' ).animate({
    marginLeft: ['0%', 'easeOutBounce'],
}, 1500, function() {
    // Animation complete.
  });
});});
$(function(){
$('#ver-mas-fotografia-ocu').click(function() {
  $('#fotografia-ocu-contenido' ).animate({
    marginLeft: ['0%', 'easeOutBounce'],
}, 1500, function() {
    // Animation complete.
  });
});});
$(function(){
$('#ver-mas-impresion-ocu').click(function() {
  $('#impresion-ocu-contenido' ).animate({
    marginLeft: ['0%', 'easeOutBounce'],
}, 1500, function() {
    // Animation complete.
  });
});});
$(function(){
$('#ver-mas-producto-promocional-ocu').click(function() {
  $('#producto-promocional-ocu-contenido' ).animate({
    marginLeft: ['0%', 'easeOutBounce'],
}, 1500, function() {
    // Animation complete.
  });
});});
$(function(){
$('#ver-mas-sistemas-de-exhibicion-ocu').click(function() {
  $('#sistemas-de-exhibicion-ocu-contenido' ).animate({
    marginLeft: ['0%', 'easeOutBounce'],
}, 1500, function() {
    // Animation complete.
  });
});});
$(function(){
$('#ver-mas-montaje-de-vallas-ocu').click(function() {
  $('#montaje-de-vallas-ocu-contenido' ).animate({
    marginLeft: ['0%', 'easeOutBounce'],
}, 1500, function() {
    // Animation complete.
  });
});});




// Muestra el texto de html5 y css3
$(function(){
$('#MOSTRAR-DESCRIPCION-ESPECIFICACIONES-DE-html').click(function() {
  $('.items-contenedor' ).animate({
   marginTop: ['700px', 'easeInOutBack'],
}, 1000, function() {
  $('#html5-plan-especificaciones' ).animate({
   marginTop: ['0px', 'easeOutQuart'],
}, 1000, function() {})
});});});
// Muestra el texto de WRODPRESS Y JOOMLA
$(function(){
$('#MOSTRAR-DESCRIPCION-ESPECIFICACIONES-DE-wordpress-joomla').click(function() {
  $('.items-contenedor' ).animate({
   marginTop: ['700px', 'easeInOutBack'],
}, 1000, function() {
  $('#wordpress-joomla-plan-especificaciones' ).animate({
   marginTop: ['0px', 'easeOutQuart'],
}, 1000, function() {});
});});});


// Muestra el texto de MARKETING INTERACTIVO
$(function(){
$('#MOSTRAR-DESCRIPCION-ESPECIFICACIONES-DE-marketing-estrategico').click(function() {
  $('.items-contenedor' ).animate({
   marginTop: ['700px', 'easeInOutBack'],
}, 1000, function() {
  $('#marketing-interactivo-plan-especificaciones' ).animate({
   marginTop: ['0px', 'easeOutQuart'],
}, 1000, function() {});
});});});

// Muestra el texto de APLICACIONES WEB Y MOVILES
$(function(){
$('#MOSTRAR-DESCRIPCION-ESPECIFICACIONES-DE-aplicaciones-web-y-moviles').click(function() {
  $('.items-contenedor' ).animate({
   marginTop: ['700px', 'easeInOutBack'],
}, 1000, function() {
  $('#aplicaciones-web-y-moviles-plan-especificaciones' ).animate({
   marginTop: ['0px', 'easeOutQuart'],
}, 1000, function() {});
});});});



// Muestra el texto de TIENDA ON-LINE E E-COMMERCE
$(function(){
$('#MOSTRAR-DESCRIPCION-ESPECIFICACIONES-DE-tienda-online-ecommerce').click(function() {
  $('.items-contenedor' ).animate({
   marginTop: ['700px', 'easeInOutBack'],
}, 1000, function() {
  $('#tienda-online-ecommerce-plan-especificaciones' ).animate({
   marginTop: ['0px', 'easeOutQuart'],
}, 1000, function() {});
});});});

// ---------------------------------sección de fotografía

// Muestra el texto de FOTOGRAFIA DE PRODUCTOS
$(function(){
$('#MOSTRAR-DESCRIPCION-ESPECIFICACIONES-DE-fotografia-de-productos').click(function() {
  $('#items-contenedor-fotografia' ).animate({
   marginTop: ['700px', 'easeInOutBack'],
}, 1000, function() {
  $('#fotografia-de-productos-plan-especificaciones' ).animate({
   marginTop: ['0px', 'easeOutQuart'],
}, 1000, function() {});
});});});

$(function(){
$('#MOSTRAR-DESCRIPCION-ESPECIFICACIONES-DE-fotografia-de-alimentos').click(function() {
  $('#items-contenedor-fotografia' ).animate({
   marginTop: ['700px', 'easeInOutBack'],
}, 1000, function() {
  $('#fotografia-de-alimentos-plan-especificaciones' ).animate({
   marginTop: ['0px', 'easeOutQuart'],
}, 1000, function() {});
});});});
$(function(){
$('#MOSTRAR-DESCRIPCION-ESPECIFICACIONES-DE-fotografia-de-moda').click(function() {
  $('#items-contenedor-fotografia' ).animate({
   marginTop: ['700px', 'easeInOutBack'],
}, 1000, function() {
  $('#fotografia-de-moda-plan-especificaciones' ).animate({
   marginTop: ['0px', 'easeOutQuart'],
}, 1000, function() {});
});});});


// ---------------------------------sección de IMPRESION
$(function(){
$('#MOSTRAR-DESCRIPCION-ESPECIFICACIONES-DE-tintas-ecolatex').click(function() {
  $('#items-contenedor-impresion' ).animate({
   marginTop: ['700px', 'easeInOutBack'],
}, 1000, function() {
  $('#tintas-ecolatex-especificaciones' ).animate({
   marginTop: ['0px', 'easeOutQuart'],
}, 1000, function() {});
});});});
$(function(){
$('#MOSTRAR-DESCRIPCION-ESPECIFICACIONES-DE-impresion-sobre-rigidos').click(function() {
  $('#items-contenedor-impresion' ).animate({
   marginTop: ['700px', 'easeInOutBack'],
}, 1000, function() {
  $('#impresion-sobre-rigidos-especificaciones' ).animate({
   marginTop: ['0px', 'easeOutQuart'],
}, 1000, function() {});
});});});
$(function(){
$('#MOSTRAR-DESCRIPCION-ESPECIFICACIONES-DE-impresion-alta-resolucion').click(function() {
  $('#items-contenedor-impresion' ).animate({
   marginTop: ['700px', 'easeInOutBack'],
}, 1000, function() {
  $('#impresion-alta-resolucion-especificaciones' ).animate({
   marginTop: ['0px', 'easeOutQuart'],
}, 1000, function() {});
});});});
$(function(){
$('#MOSTRAR-DESCRIPCION-ESPECIFICACIONES-DE-impresion-gran-formato').click(function() {
  $('#items-contenedor-impresion' ).animate({
   marginTop: ['700px', 'easeInOutBack'],
}, 1000, function() {
  $('#impresion-gran-formato-especificaciones' ).animate({
   marginTop: ['0px', 'easeOutQuart'],
}, 1000, function() {});
});});});

// ---------------------------------sección de SISTEMAS DE EXHIBIXION

$(function(){
$('#MOSTRAR-DESCRIPCION-ESPECIFICACIONES-DE-visual-rolldouble').click(function() {
  $('#items-contenedor-sistemas-de-exhibicion' ).animate({
   marginTop: ['700px', 'easeInOutBack'],
}, 1000, function() {
  $('#visual-rolldouble-especificaciones' ).animate({
   marginTop: ['0px', 'easeOutQuart'],
}, 1000, function() {});
});});});
$(function(){
$('#MOSTRAR-DESCRIPCION-ESPECIFICACIONES-DE-visual-rollstandard').click(function() {
  $('#items-contenedor-sistemas-de-exhibicion' ).animate({
   marginTop: ['700px', 'easeInOutBack'],
}, 1000, function() {
  $('#visual-rollstandard-especificaciones' ).animate({
   marginTop: ['0px', 'easeOutQuart'],
}, 1000, function() {});
});});});
$(function(){
$('#MOSTRAR-DESCRIPCION-ESPECIFICACIONES-DE-visual-street').click(function() {
  $('#items-contenedor-sistemas-de-exhibicion' ).animate({
   marginTop: ['700px', 'easeInOutBack'],
}, 1000, function() {
  $('#visual-street-especificaciones' ).animate({
   marginTop: ['0px', 'easeOutQuart'],
}, 1000, function() {});
});});});
$(function(){
$('#MOSTRAR-DESCRIPCION-ESPECIFICACIONES-DE-visual-x-60-80').click(function() {
  $('#items-contenedor-sistemas-de-exhibicion' ).animate({
   marginTop: ['700px', 'easeInOutBack'],
}, 1000, function() {
  $('#visual-x-60-80-especificaciones' ).animate({
   marginTop: ['0px', 'easeOutQuart'],
}, 1000, function() {});
});});});
$(function(){
$('#MOSTRAR-DESCRIPCION-ESPECIFICACIONES-DE-promoterplate').click(function() {
  $('#items-contenedor-sistemas-de-exhibicion' ).animate({
   marginTop: ['700px', 'easeInOutBack'],
}, 1000, function() {
  $('#promoterplate-especificaciones' ).animate({
   marginTop: ['0px', 'easeOutQuart'],
}, 1000, function() {});
});});});
$(function(){
$('#MOSTRAR-DESCRIPCION-ESPECIFICACIONES-DE-upl').click(function() {
  $('#items-contenedor-sistemas-de-exhibicion' ).animate({
   marginTop: ['700px', 'easeInOutBack'],
}, 1000, function() {
  $('#upl-especificaciones' ).animate({
   marginTop: ['0px', 'easeOutQuart'],
}, 1000, function() {});
});});});






;$(function(){
$('.volver-btn').click(function() {
  $('.plan-especificaciones-all' ).animate({
   marginTop: ['800px', 'easeInOutBack'],
}, 1000, function() {
$('.items-contenedor' ).animate({
   marginTop: ['0px', 'easeInOutBack'],
}, 1000, function() {  
});});});});

;$(function(){
$('.volver-btn-fotografia').click(function() {
  $('.plan-especificaciones-all' ).animate({
   marginTop: ['800px', 'easeInOutBack'],
}, 1000, function() {
$('#items-contenedor-fotografia' ).animate({
   marginTop: ['0px', 'easeInOutBack'],
}, 1000, function() {  
});});});});

$(function(){
$('.volver-btn-impresion').click(function() {
  $('.plan-especificaciones-all' ).animate({
   marginTop: ['800px', 'easeInOutBack'],
}, 1000, function() {
$('#items-contenedor-impresion' ).animate({
   marginTop: ['0px', 'easeInOutBack'],
}, 1000, function() {  
});});});});
$(function(){
$('.volver-btn-sistemas-de-exhibicion').click(function() {
  $('.plan-especificaciones-all' ).animate({
   marginTop: ['800px', 'easeInOutBack'],
}, 1000, function() {
$('#items-contenedor-sistemas-de-exhibicion' ).animate({
   marginTop: ['0px', 'easeInOutBack'],
}, 1000, function() {  
});});});});
$(function(){
$('.volver-btn-montaje-de-vallas').click(function() {
  $('.plan-especificaciones-all' ).animate({
   marginTop: ['800px', 'easeInOutBack'],
}, 1000, function() {
$('#items-contenedor-montaje-de-vallas' ).animate({
   marginTop: ['0px', 'easeInOutBack'],
}, 1000, function() {  
});});});});


//contacto
$(function(){
$('#contactenos-btn-muestra-contenido').click(function() {
   $('#formualrio-contenedor-interno').fadeIn(500);
   $('#clientes').fadeOut(500);
 $('.contenedor-de-footer-menu-y-formulario' ).animate({
   bottom: ['0px', 'easeInBack'],
}, 800, function() {
;});});});
$(function(){
$('.btn-cerrar-formulario').click(function() {
  $('.contenedor-de-footer-menu-y-formulario' ).animate({
   bottom: ['-260px', 'easeOutBack'],
}, 800, function() {
   $('.btn-cerrar-formulario').fadeOut(500)
;});});});

$(function(){
$('#clientes-btn-muestra-contenido').click(function() {
   $('#clientes').fadeIn(500);
   $('#formualrio-contenedor-interno').fadeOut(500);
$('.contenedor-de-footer-menu-y-formulario' ).animate({
   bottom: ['0px', 'easeInBack'],
}, 800, function() {
;});});});



$(function(){
$('#contactenos-btn-muestra-contenido, #clientes-btn-muestra-contenido').click(function() {
$('.btn-cerrar-formulario').delay(1500).fadeIn(2000);
});});

$(function(){
$('#ver-especificaciones-montaje-de-vallas').click(function() {
$('#fotografias-muestras-contenedor-masonry, #ver-especificaciones-montaje-de-vallas').slideUp(1000);
$('.descripcion-de-especificaciones').delay(1000).fadeIn(1500);
});});
$(function(){
$('.volver-btn-vallas-especificaciones').click(function() {
$('.descripcion-de-especificaciones').fadeOut(1500);
$('#fotografias-muestras-contenedor-masonry, #ver-especificaciones-montaje-de-vallas').delay(1000).slideDown(1000);

});});



 $(document).ready(function() {
$('.CERRAR-contenidos-internos, .cerrar-fotografia-magenta, .cerrar-impresion-naranja, .cerrar-montaje-de-vallas-cyan, .cerrar-producto-promocional-cyanverde, .cerrar-sistemas-de-exhibicion-naranja').click(function() {
  $('.contenido-oculto-ANIMADO').animate({
    marginLeft: ['100%', 'easeInOutBack'],

  }, 2000, function() {
    // Animation complete.
  });
});});

Por lo que veo tenes muchas funciones que hacen lo mismo definidas muchas veces, podrias usar mas el tema de los selectores y ejecutar la funcion que es similar para ciertos elementos en la misma linea ej:

$('#div1,#div2').animate(....);

se te haria mas corto el codigo y menos redundante

en el caso de los selectores como seira el codigo? no lo he hecho colocando los selecotres en la misma linea ya que cuando ejecuto la animacion, todos se van a animar al tiempo y eso no es lo que necesito, que podria hacer?

si vos necesitas que una animacion se ejecute despues de otra deberias usar entonces los callbacks del animate de jquery ejemplo :

$('#div1').animate({'left' : '10px'},5000,function(){
//Cuando termina realiza lo que hay aqui
alert('termino la animacion del div1');
})

agregando al codigo anterior podrias separar las animaciones q son similares en funciones ejemplo

function animacionLeft(){
// codigo de mover a la derecha
}

despues solo harias la llamada a esa funcion sin tener q repetir el mismo codigo infinitas veces

Lo que necesito es que, tengo varios botones que cada uno al clikealo ejecuta una animcion, no que al clikear un boton se ejecutan una tras otra. Podrias darme un ejemplo del codigo anterior? con dos o tres botones teniendo en cuenta el codigo que deje al principio, es urgente me seria de gran ayuda.

<div id="1"></div>
<input type="button" id="der" value="mover derecha"/>
<input type="button" id="izq" value="mover izquierda"/>
<input type="button" id="arr" value="mover arriba"/>
<script type="text/javascript">
$(document).on('ready',function(){
$('#der').on('click',function(){
$('#1').animate({right : '50px'},'normal');
});
$('#izq').on('click',function(){
$('#1').animate({left : '50px'},'normal');
});
$('#arr').on('click',function(){
$('#1').animate({top : '0px'},'normal');
});
});
</script>

si queres que por ejemplo cuando apretas boton arriba y despues boton izquierda haga la animacion sin demora tendrias que agregar el stop

$('#1').stop().animate({left : '50px'},'normal');

Hola alez, mira lo que necesito es una forma de simplificar el codigo, no redundar los mismos valores de animacion para distintos botones y selectores, seria simplificar el siguiente codigo:

Código Javascript :

$('#btn-desarrolloweb-ver-mas').click(function() {
  $('#desarrollo-web-contenido' ).animate({
    marginLeft: ['0%', 'easeOutBounce'],
}, 1500, function() {
    // Animation complete.
  });
});});
$(function(){
$('#ver-mas-fotografia-ocu').click(function() {
  $('#fotografia-ocu-contenido' ).animate({
    marginLeft: ['0%', 'easeOutBounce'],
}, 1500, function() {
    // Animation complete.
  });
});});
$(function(){
$('#ver-mas-impresion-ocu').click(function() {
  $('#impresion-ocu-contenido' ).animate({
    marginLeft: ['0%', 'easeOutBounce'],
}, 1500, function() {
    // Animation complete.
  });
});});

que son distintas animaciones , con distintos botones, pero la animacion es la misma, las mismas corrdenadas y propiedades

Lo que necesitas es hacer una sola función que haga la animación para todos los elementos pasándole diferentes parámetros

algo así:

Código Javascript :

function animarElemento(boton, elemento) {

$(boton).click(function() {

  $(elemento ).animate({

    marginLeft: ['0%', 'easeOutBounce'],

}, 1500, function() {

    // Animation complete.

  });

});});

}

despues solo tienes que llamar la función cambiándole el botón y el elemento a animar:

Código Javascript :

animarElemento('#ver-mas-impresion-ocu', '#impresion-ocu-contenido');

y así con todos los elementos.