En este post continúo con el código que describí en el segundo post sobre cómo refrescar un div sin necesidad de refrescar toda la página, pero añadiéndole unas lineas para este se aparezca de forma suave. La página de ejemplo es http://www.talleresguadamia.com y el código es el que sigue:
Podéis ver lo fácil que es. Hemos agregado sólo dos cosas:
- La linea "$('#contenido').css('display','none')", que lo único que hace es cambiar la propiedad css "display" del div "#contenido" por "none", osea, hacerlo invisible.
- Y añadimos a "$("#contenido").load(href)" fadeIn que carga en el div "#contenido" la página solicitada de forma suave. En fadeIn ponemos el parámetro que más nos convenga, que son los milisegundos que tardaría en aparecer la página.
Podemos mejorar el código de la siguiente manera:
$("#contenido").fadeOut(500, function( ){
$("#contenido").load(href).fadeIn(700)
});
Observad que en 'fadeOut' ahora pasamos dos parámetros: el primero es la duración del efecto y el segundo una función que se ejecutará, sólamente cuando el efecto haya terminado (en este caso la carga de la nueva página con el efecto 'fadeIn').
<script type="text/javascript">
$(document).ready(function(){
$("#contenido a").each(function(){
var href = $(this).attr("href");
$(this).attr({ href: "#"});
$(this).click(function(event){
$("#contenido").css("display","none");
$("#contenido").load(href).fadeIn(700);
});
});
});;
</script>
$(document).ready(function(){
$("#contenido a").each(function(){
var href = $(this).attr("href");
$(this).attr({ href: "#"});
$(this).click(function(event){
$("#contenido").css("display","none");
$("#contenido").load(href).fadeIn(700);
});
});
});;
</script>
Podéis ver lo fácil que es. Hemos agregado sólo dos cosas:
- La linea "$('#contenido').css('display','none')", que lo único que hace es cambiar la propiedad css "display" del div "#contenido" por "none", osea, hacerlo invisible.
- Y añadimos a "$("#contenido").load(href)" fadeIn que carga en el div "#contenido" la página solicitada de forma suave. En fadeIn ponemos el parámetro que más nos convenga, que son los milisegundos que tardaría en aparecer la página.
Podemos mejorar el código de la siguiente manera:
$("#contenido").fadeOut(500, function( ){
$("#contenido").load(href).fadeIn(700)
});
Observad que en 'fadeOut' ahora pasamos dos parámetros: el primero es la duración del efecto y el segundo una función que se ejecutará, sólamente cuando el efecto haya terminado (en este caso la carga de la nueva página con el efecto 'fadeIn').
esta buenisimo esto! pero no lo puedo hacer funcionar! tendrias alguna explicacion completa, ya que soy nueva en javascrip pero me doy mañas =)
ResponderEliminarsalu2 violeta
Si copias el código tal cual, únicamente sustituyendo la etiqueta '#contenido' por el id del div que tengas en tu HTML, te debería de funcionar. Y, por supuesto, no olvides tener descargada la última versión de jQuery y pones entre las etiquetas 'head' de tu página lo siguiente:
ResponderEliminar<script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
. El nombre del archivo jQuery también puede variar, pon el nombre exacto del archivo descargado (atenta a las mayùsculas y minúsculas).
Me funcinoa perfectamente en chrome pero en firefox no cambia el div, cambia la página entera.
ResponderEliminar