Buen día compañero javierflti.
Después de haber investigado y leído y releído no he podido dar exactamente con el efecto que busco. Lo máximo que logré fue armar un código como este:
Código:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Efectos con jQuery</title>
<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#ocultar").click(function(event){
event.preventDefault();
$("#capaefectos").hide(3000);
});
$("#mostrar").click(function(event){
event.preventDefault();
$("#capaefectos").show(3000);
});
});
</script>
</head>
<body>
<div id="capaefectos" style="background-color: #cc7700; color:fff; padding:10px;">
Esto es una capa que nos servirá para hacer efectos!
<br>
<br>
Pongo este texto simplemente de prueba
</div>
<p>
<a href="#" id="ocultar">Ocultar la capa</a> |
<a href="#" id="mostrar">Mostrar la capa</a>
</p>
</body>
</html>
El cual hace aparecer y desaparecer la div por completo.
Ahora bien, bajé el código de la página que muestro en el primer mensaje de este post y tomé el código y me funciona el efecto de bajar y subir el div, lo que no sé cómo realizar es que me muestre un párrafo distinto según el personaje que elijo, estuve investigando como lo puedo cambiar con la línea que tú me indicas:
Código:
$(#nombreDeTuDiv).innertext() = "nuevo texto del div"
pero no sé cómo usarla, dónde ni cómo ponerla en el código.
aquí está el código de la página de don gato:
nombre del archivo: personajes.html
Código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Personajes</title>
<meta name="description" content="Sección Personajes de Don Gato."/>
<!-- Importante para que sea responsive, aquí se adapta al device -->
<meta name"viewport" content="width=device-width,initial-scale=1, maximum-scale=1"/>
<!-- http://www.convertico.com/ imagen de tipo ico de 16px x 16px -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
<!-- imagen de 57px x 57 px formato png para visualizar en ipad -->
<link rel="apple.touch-icon" href="apple-touch-icon.png"/>
<!-- http://humanstxt.org/ datos de la gente que colaboró en el sitio -->
<!-- <link rel="author" type="text/plain" href="humans.txt"/> -->
<!-- Mapa de sitio en formato XML http://www,sitemaps.org/
Generador de mapa de sitio http://www.xlm-sitemaps.com -->
<link rel="sitemap" type="application/xml" title="Sitemap" href="sitemap.xml" />
<link rel="stylesheet" href="css/jquery.fancybox.css" />
<link rel="stylesheet" href="css/estilos.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
!window.jQuery && document.write("<script src='js/jquery.min.js'><\/script>");
</script>
<script src="js/jquery.mousewheel-3.0.6.pack.js"></script>
<script src="js/jquery.fancybox.js"></script>
<script src="js/efectos.js"></script>
<script>
$(document).on("ready",mostrarPersonajes);
</script>
</head>
<body>
<header>
<h1>
<a href="index.html"><img src="img/top-cat-logo.png" title="Don Gato"></a>
</h1>
<nav>
<ul>
<!-- <li><a class="cambio" href="index.html">Inicio</a></li> -->
<li><a class="cambio" href="historia.html">Historia</a></li>
<li><a class="cambio" href="personajes.html">Personajes</a></li>
<li><a class="cambio" href="capitulos.html">Capítulos</a></li>
<li><a class="cambio" href="galeria.html">Galería</a></li>
</ul>
</nav>
</header>
<section id="contenido">
<section id="personajes-descripcion">
<h2>Top Cat</h2>
<p>
Top Cat, conocido en español como Don Gato y su pandilla o simplemente como Don Gato, es una serie animada para la televisión de apenas 30 episodios, ideada por el joven Luis Pistocchi y producida por Hanna-Barbera en 1961 y emitida en el horario estelar en la cadena ABC de los Estados Unidos a partir del 27 de septiembre de 1961 hasta el 8 de abril de 1962.
</p>
</section>
<section id="personajes-html5">
<div>
<figure id="don_gato_" class="personajes">
<a href="#">
<img class="cambio redonda" src="img/don.png" title="Don Gato" />
<figcaption class="cambio">Don Gato</figcaption>
</a>
</figure>
<figure id="benito_" class="personajes">
<a href="#">
<img class="cambio redonda" src="img/ben.png" title="Benito" />
<figcaption class="cambio">Benito</figcaption>
</a>
</figure>
<figure id="cucho_" class="personajes">
<a href="#">
<img class="cambio redonda" src="img/cu.png" title="Cucho" />
<figcaption class="cambio">Cucho</figcaption>
</a>
</figure>
<figure id="demostenes_" class="personajes">
<a href="#">
<img class="cambio redonda" src="img/demos.png" title="Demóstenes" />
<figcaption class="cambio">Demóstenes</figcaption>
</a>
</figure>
<figure id="espanto_" class="personajes">
<a href="#">
<img class="cambio redonda" src="img/espan.png" title="Espanto" />
<figcaption class="cambio">Espanto</figcaption>
</a>
</figure>
<figure id="panza_" class="personajes">
<a href="#">
<img class="cambio redonda" src="img/pan.png" title="Panza" />
<figcaption class="cambio">Panza</figcaption>
</a>
</figure>
<figure id="matute_" class="personajes">
<a href="#">
<img class="cambio redonda" src="img/matu.png" title="Matute" />
<figcaption class="cambio">Matute</figcaption>
</a>
</figure>
</div>
</section>
</section>
<footer>
Sitio Don gato por Fco. Hdez. Mayo 2013
</footer>
</body>
</html>
y aquí esta el código js
nombre del archivo: efectos.js
Código:
//funcion del index.html
function iniciarSlider()
{
$(".flexslider").flexslider({
animation:"slide",
direction:"horizontal",
slideshowSpeed: 3000
});
}
//funcion de acerca.html
function formulaHTML5()
{
//alert("probando");
var imgFormula = $("#acerca-historia figure img");
imgFormula.on("mouseover",function(){
$(this).css({
background:"rgba(190,236,249,.6)",
borderRadius:"1em",
boxShadow:"-.1em -.1em .5em #F60 inset"
});
});
imgFormula.on("mouseout",function(){
$(this).css({
background:"transparent",
borderRadius:"0",
boxShadow:""
});
});
imgFormula.on("click",function(){
$("#acerca-historia figcaption").slideToggle(2000);
});
}
//funciones de personajes.html
function mostrarPersonajes()
{
//alert("Probando");
var figureId, figcaption, url;
$(".personajes").on("mouseover",function(){
figureId = $(this).attr("id");
//alert(figureId);
figcaption = "#"+figureId+" figcaption";
$(figcaption).animate({opacity:1},"swing");
});
$(".personajes").on("mouseout",function(){
figureId = $(this).attr("id");
//alert(figureId);
figcaption = "#"+figureId+" figcaption";
$(figcaption).animate({opacity:0},"swing");
});
$("#don_gato_").on("click",quePersonaje);
$("#benito_").on("click",quePersonaje);
$("#cucho_").on("click",quePersonaje);
$("#demostenes_").on("click",quePersonaje);
$("#espanto_").on("click",quePersonaje);
$("#panza_").on("click",quePersonaje);
$("#matute_").on("click",quePersonaje);
$(".ejemplo").fancybox();
}
function quePersonaje(enlace)
{
enlace.preventDefault();
figureId = $(this).attr("id");
url = "html/"+figureId+".html";
$("#personajes-descripcion").slideUp(2000,function(){
$(this).load(url);
}).slideDown(2000);
}
Lo que cambia es el contenido del párrafo del archivo "personajes.html", según el personaje que se elije, pero no sé como meterle el nuevo párrafo.
Espero me puedas ayudar por favor compañero.
Dios te Bendiga y te Conserve la Salud.