Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: javaquery en 27 de Diciembre 2016, 16:17
-
Buenas tengo duda en este ejercicio
9.5 Al situar el ratón sobre la imagen, el div #infoImg ocupe el 100% de la altura de la imagen con una transición de 1 segundo. Al quitar el ratón de encima, el div #infoImg ocupe de nuevo el 30% de la imagen con una transición de 1 segundo.
el codigo html es este:
<div class="contentImg">
<img src="img/imatge.jpg"/>
<div id="infoImg">
#infoImg
</div>
</div>
y lo que yo he hecho es esto, no esta completo, pero no se si esta bien lo que llevo
$(div.contentImg).mouseenter(function(){
$("#infoImg").animate({
height:
}
-
Hola javimf.
¿El código html está completo?
¿falta algún código css?
Porque según el enunciado el div debe de ocupar un 30% de la imagen en un principio.
Y si puedes poner en el código una imagen que podamos ver, pues mejor, así será mas fácil trabajar sobre ello.
En principio el código que colocaste lleva buen camino, pero no puedo asegurarlo al 100% al no conocer el resto de código.
Saludos. ;D
-
Hola
este es el codigo html completo
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-3.1.1.min.js" type="text/javascript" ></script>
<script src="introJQuery.js" type="text/javascript"></script>
</head>
<body>
<header>
<h1>Intro jQuery</h1>
</header>
<div class="contentDiv">
<div id="setBlueColor">#setBlueColor</div>
<div id="setRedColor">#setRedColor</div>
<br/>
<div id="setInvisible">#setInvisible</div>
<div id="setVisible">#setVisible</div>
<div id="toggleVisible">#toggleVisible</div>
<br />
<div id="incSize">#incSize</div>
<div id="decSize">#decSize</div>
<div id="decRight">#decRight</div>
<div id="incRight">#incRight</div>
<br />
</div>
<div class="contentImg">
<img src="img/imatge.jpg"/>
<div id="infoImg">
#infoImg
</div>
</div>
<div class="contentDiv">
<div id="movContinuo">
#movContinuo
</div>
</div>
<div style="position:relative;width: 100%;">
<div id="divMobil" style="position:relative">
#divMobil
</div>
</div>
</body>
</html>
y este el codigo css
body>div{
margin-bottom: 10px;
}
.contentDiv> div:hover{
background-color: #00C1F2;
cursor: pointer;
}
.contentDiv> div {
border: 1px solid blue;
margin: 5px;
min-height: 30px;
min-width: 75px;
display: inline-block;
vertical-align: top;
background-color:#FFDAB9;
border-radius: 15%;
border:1px solid black;
padding:0px 2px;
text-align: center;
}
#divMobil{
border-radius:3px;
border:1px solid #00C1F2;
width: 200px;
height: 30px;
}
.contentImg{
width: auto;
height: auto;
width: 200px;
position:relative;
}
.contentImg>img{
width: 200px;
}
.contentImg>div{
opacity: 0.7;
background-color: white;
position:absolute;
bottom:0px;
width: 100%;
overflow:hidden;
height: 30%;
}
-
Buenas.
Prueba con esto:
$(document).ready(function(){
$(".contentImg > img").mouseenter(function(){
$("#infoImg").animate({
height: '100%'
});
});
$(".contentImg > img").mouseleave(function(){
$("#infoImg").animate({
height: '30%'
});
});
});
Saludos. ;D
-
Buenas Pedro
Lo he probado pero no me funciona, no hace nada. He probado tambien con Chrome por si fuera algun problema de navegador.
-
como dice con una transición de 1 segundo, lo he modificado pero no me funciona
$(".contentImg > img").mouseenter(function () {
$("#infoImg").animate({
height: '100%'
}, 1000
);
});
$(".contentImg > img").mouseout(function () {
$("#infoImg").animate({
height: '30%'
}, 1000
);
});
-
Te dejo el código entero que yo he usado.
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
body > div{
margin-bottom: 10px;
}
.contentDiv > div:hover {
background-color: #00C1F2;
cursor: pointer;
}
.contentDiv > div {
border: 1px solid blue;
margin: 5px;
min-height: 30px;
min-width: 75px;
display: inline-block;
vertical-align: top;
background-color:#FFDAB9;
border-radius: 15%;
border:1px solid black;
padding:0px 2px;
text-align: center;
}
#divMobil {
border-radius:3px;
border:1px solid #00C1F2;
width: 200px;
height: 30px;
}
.contentImg {
width: auto;
height: auto;
width: 200px;
position:relative;
}
.contentImg > img{
width: 200px;
}
.contentImg > div{
opacity: 0.7;
background-color: white;
position:absolute;
bottom:0px;
width: 100%;
overflow:hidden;
height: 30%;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".contentImg > img").mouseenter(function(){
$("#infoImg").animate({
height: '100%'
}, 1000);
});
$(".contentImg > img").mouseout(function(){
$("#infoImg").animate({
height: '30%'
}, 1000);
});
});
</script>
</head>
<body>
<header>
<h1>Intro jQuery</h1>
</header>
<div class="contentDiv">
<div id="setBlueColor">#setBlueColor</div>
<div id="setRedColor">#setRedColor</div>
<br/>
<div id="setInvisible">#setInvisible</div>
<div id="setVisible">#setVisible</div>
<div id="toggleVisible">#toggleVisible</div>
<br />
<div id="incSize">#incSize</div>
<div id="decSize">#decSize</div>
<div id="decRight">#decRight</div>
<div id="incRight">#incRight</div>
<br />
</div>
<div class="contentImg">
<img src="http://i.imgur.com/7UXFeCY.png"/>
<div id="infoImg">
#infoImg
</div>
</div>
<div class="contentDiv">
<div id="movContinuo">
#movContinuo
</div>
</div>
<div style="position:relative;width: 100%;">
<div id="divMobil" style="position:relative">
#divMobil
</div>
</div>
</body>
</html>
Lo único que se me ocurre es que como usas jquery en local, lo mismo no está el archivo donde le estás indicando en esta línea:
<script src="jquery-3.1.1.min.js" type="text/javascript" ></script>
Saludos. ;D
-
Si tengo el archivo en esa linea, puesto que los ejercicios anteriores me funcionan.
este es mi codigo js: funciona todo menos la ultima funcion
/* Ejercicio 7 Utilizando jQuery programa en “introJQuery.js” los
* eventos y funciones necesarios para que:
*/
$(document).ready(function () {
$("#divMobil").css("color", "blue"); //inciada la web #divMobil se muestra azul//
$("#setBlueColor").mouseenter(function () { //al entrar el raton encima de #setBlueColor
$("#divMobil").css("background-color", "green"); //el #divMobil pasa a color de fondo verde//
});
$("#setBlueColor").click(function () {//al hacer click en #setBlueColor el elemento #divMobil//
$("#divMobil").css("background-color", "blue");//cambia a color de fondo azul//
});
$("#setBlueColor").mouseleave(function () {//al situar raton fuera de #setBlueColor//
$("#divMobil").css("background-color", "orange");//#divMobil pasa a color de fondo naranja//
});
$("#setRedColor").click(function () {//al hacer click en setRedColor//
$("#divMobil").css("background-color", "red");//divMobil pasa a color de fondo rojo//
});
});
/*Ejercicio 8 Utilizando jQuery, añade en “introJQuery.js” los eventos y
* funciones necesarios para que:
*/
$(document).ready(function () {
$("#setInvisible").click(function () {//Al clikar sobre #setinvisible
$("#divMobil").fadeOut();//se oculta #divMobil//
});
$("#setVisible").click(function () {//Al clicar sobre #setvisible
$("#divMobil").fadeIn();//se muestre el #divMobil
});
$("#toggleVisible").click(function () {//al clicar sobre #toggleVsible
$("#divMobil").fadeToggle();//se alterna visible/invisible el #divMobil
});
});
/*Ejercicio 9
* Utilizando jQuery, añade en “introJQuery.js” los eventos y funciones
* necesarios para que:
*/
$(document).ready(function () { //al clicar sobre #incSize aumenta en 50px
$("#incSize").click(function () {// la altura del elemento #divMobil con
$("#divMobil").animate({//un transicion de 1.5seg
height: '+=50px'},
1500
);
});
$("#decSize").click(function () {//al clicar sobre #decSize disminuya 50px
$("#divMobil").animate({//altura elemento #divMobil con transición 2seg
height: '-=50px'},
2000
);
});
$("#incRight").click(function () {//al clicar sobre #incRight aumente 50px
$("#divMobil").animate({//la altura del elemento #divMobil con transision de 1.5seg
left: '+=50px'
}, 1500
);
});
$("#decRight").click(function () {//al clicar sobre #decRight disminuya 50 px la
$("#divMobil").animate({//distancia a la izquierda del elemento #divMobil con transicion de 1.5seg
left: '-=50px'
}, 1500
);
});
});
$(document).ready(function () {
$(".contentImg > img").mouseenter(function () {
$("#infoImg").animate({
height: '100%'
}, 1000);
});
$(".contentImg > img").mouseout(function () {
$("#infoImg").animate({
height: '30%'
}, 1000);
});
});
-
Buenas javimf.
En chrome me funciona con lo que puse, ahora he probado en firefox y crece y decrece sin parar el div, así que he cambiado moueseenter por hover y de esta manera funciona, lo he probado junto con el código que me mandaste en tres navegadores distintos y me funciona correctamente en los tres.
prueba a ver si así te funciona.
Saludos. ;D
-
No me funciona, me funciona todo menos esa ultima funcion, he probado como me has dicho tanto en crhome como en firefox, con hover y con mouseenter pero nada, he revisado la funcion no veo donde esta el error.
-
Si pruebas esto te funciona??
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
body > div{
margin-bottom: 10px;
}
.contentDiv > div:hover {
background-color: #00C1F2;
cursor: pointer;
}
.contentDiv > div {
border: 1px solid blue;
margin: 5px;
min-height: 30px;
min-width: 75px;
display: inline-block;
vertical-align: top;
background-color:#FFDAB9;
border-radius: 15%;
border:1px solid black;
padding:0px 2px;
text-align: center;
}
#divMobil {
border-radius:3px;
border:1px solid #00C1F2;
width: 200px;
height: 30px;
}
.contentImg {
width: auto;
height: auto;
width: 200px;
position:relative;
}
.contentImg > img{
width: 200px;
}
.contentImg > div{
opacity: 0.7;
background-color: white;
position:absolute;
bottom:0px;
width: 100%;
overflow:hidden;
height: 30%;
}
</style>
<script type="text/javascript">
/* Ejercicio 7 Utilizando jQuery programa en “introJQuery.js” los
* eventos y funciones necesarios para que:
*/
$(document).ready(function () {
$("#divMobil").css("color", "blue"); //inciada la web #divMobil se muestra azul//
$("#setBlueColor").mouseenter(function () { //al entrar el raton encima de #setBlueColor
$("#divMobil").css("background-color", "green"); //el #divMobil pasa a color de fondo verde//
});
$("#setBlueColor").click(function () {//al hacer click en #setBlueColor el elemento #divMobil//
$("#divMobil").css("background-color", "blue");//cambia a color de fondo azul//
});
$("#setBlueColor").mouseleave(function () {//al situar raton fuera de #setBlueColor//
$("#divMobil").css("background-color", "orange");//#divMobil pasa a color de fondo naranja//
});
$("#setRedColor").click(function () {//al hacer click en setRedColor//
$("#divMobil").css("background-color", "red");//divMobil pasa a color de fondo rojo//
});
/*Ejercicio 8 Utilizando jQuery, añade en “introJQuery.js” los eventos y
* funciones necesarios para que:
*/
$("#setInvisible").click(function () {//Al clikar sobre #setinvisible
$("#divMobil").fadeOut();//se oculta #divMobil//
});
$("#setVisible").click(function () {//Al clicar sobre #setvisible
$("#divMobil").fadeIn();//se muestre el #divMobil
});
$("#toggleVisible").click(function () {//al clicar sobre #toggleVsible
$("#divMobil").fadeToggle();//se alterna visible/invisible el #divMobil
});
/*Ejercicio 9
* Utilizando jQuery, añade en “introJQuery.js” los eventos y funciones
* necesarios para que:
*/
//al clicar sobre #incSize aumenta en 50px
$("#incSize").click(function () {// la altura del elemento #divMobil con
$("#divMobil").animate({//un transicion de 1.5seg
height: '+=50px'},
1500
);
});
$("#decSize").click(function () {//al clicar sobre #decSize disminuya 50px
$("#divMobil").animate({//altura elemento #divMobil con transición 2seg
height: '-=50px'},
2000
);
});
$("#incRight").click(function () {//al clicar sobre #incRight aumente 50px
$("#divMobil").animate({//la altura del elemento #divMobil con transision de 1.5seg
left: '+=50px'
}, 1500
);
});
$("#decRight").click(function () {//al clicar sobre #decRight disminuya 50 px la
$("#divMobil").animate({//distancia a la izquierda del elemento #divMobil con transicion de 1.5seg
left: '-=50px'
}, 1500
);
});
$(".contentImg > img").hover(function () {
$("#infoImg").animate({
height: '100%'
}, 1000);
});
$(".contentImg > img").mouseout(function () {
$("#infoImg").animate({
height: '30%'
}, 1000);
});
});
</script>
</head>
<body>
<header>
<h1>Intro jQuery</h1>
</header>
<div class="contentDiv">
<div id="setBlueColor">#setBlueColor</div>
<div id="setRedColor">#setRedColor</div>
<br/>
<div id="setInvisible">#setInvisible</div>
<div id="setVisible">#setVisible</div>
<div id="toggleVisible">#toggleVisible</div>
<br />
<div id="incSize">#incSize</div>
<div id="decSize">#decSize</div>
<div id="decRight">#decRight</div>
<div id="incRight">#incRight</div>
<br />
</div>
<div class="contentImg">
<img src="http://i.imgur.com/7UXFeCY.png"/>
<div id="infoImg">
#infoImg
</div>
</div>
<div class="contentDiv">
<div id="movContinuo">
#movContinuo
</div>
</div>
<div style="position:relative;width: 100%;">
<div id="divMobil" style="position:relative">
#divMobil
</div>
</div>
</body>
</html>
-
Yo lo tengo que entregar en archivos separados por un lado el js y el css.
este es mi js
/* Ejercicio 7 Utilizando jQuery programa en “introJQuery.js” los
* eventos y funciones necesarios para que:
*/
$(document).ready(function () {
$("#divMobil").css("color", "blue"); //inciada la web #divMobil se muestra azul//
$("#setBlueColor").mouseenter(function () { //al entrar el raton encima de #setBlueColor
$("#divMobil").css("background-color", "green"); //el #divMobil pasa a color de fondo verde//
});
$("#setBlueColor").click(function () {//al hacer click en #setBlueColor el elemento #divMobil//
$("#divMobil").css("background-color", "blue");//cambia a color de fondo azul//
});
$("#setBlueColor").mouseleave(function () {//al situar raton fuera de #setBlueColor//
$("#divMobil").css("background-color", "orange");//#divMobil pasa a color de fondo naranja//
});
$("#setRedColor").click(function () {//al hacer click en setRedColor//
$("#divMobil").css("background-color", "red");//divMobil pasa a color de fondo rojo//
});
});
/*Ejercicio 8 Utilizando jQuery, añade en “introJQuery.js” los eventos y
* funciones necesarios para que:
*/
$(document).ready(function () {
$("#setInvisible").click(function () {//Al clikar sobre #setinvisible
$("#divMobil").fadeOut();//se oculta #divMobil//
});
$("#setVisible").click(function () {//Al clicar sobre #setvisible
$("#divMobil").fadeIn();//se muestre el #divMobil
});
$("#toggleVisible").click(function () {//al clicar sobre #toggleVsible
$("#divMobil").fadeToggle();//se alterna visible/invisible el #divMobil
});
});
/*Ejercicio 9
* Utilizando jQuery, añade en “introJQuery.js” los eventos y funciones
* necesarios para que:
*/
$(document).ready(function () { //al clicar sobre #incSize aumenta en 50px
$("#incSize").click(function () {// la altura del elemento #divMobil con
$("#divMobil").animate({//un transicion de 1.5seg
height: '+=50px'},
1500
);
});
$("#decSize").click(function () {//al clicar sobre #decSize disminuya 50px
$("#divMobil").animate({//altura elemento #divMobil con transición 2seg
height: '-=50px'},
2000
);
});
$("#incRight").click(function () {//al clicar sobre #incRight aumente 50px
$("#divMobil").animate({//la altura del elemento #divMobil con transision de 1.5seg
left: '+=50px'
}, 1500
);
});
$("#decRight").click(function () {//al clicar sobre #decRight disminuya 50 px la
$("#divMobil").animate({//distancia a la izquierda del elemento #divMobil con transicion de 1.5seg
left: '-=50px'
}, 1500
);
});
$(".contentImg > img").hover(function () {
$("#infoImg").animate({
height: '100%'
}, 1000);
});
$(".contentImg > img").mouseout(function () {
$("#infoImg").animate({
height: '30%'
}, 1000);
});
});
Este es mi html
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-3.1.1.min.js" type="text/javascript" ></script>
<script src="introJQuery.js" type="text/javascript"></script>
</head>
<body>
<header>
<h1>Intro jQuery</h1>
</header>
<div class="contentDiv">
<div id="setBlueColor">#setBlueColor</div>
<div id="setRedColor">#setRedColor</div>
<br/>
<div id="setInvisible">#setInvisible</div>
<div id="setVisible">#setVisible</div>
<div id="toggleVisible">#toggleVisible</div>
<br />
<div id="incSize">#incSize</div>
<div id="decSize">#decSize</div>
<div id="decRight">#decRight</div>
<div id="incRight">#incRight</div>
<br />
</div>
<div class="contentImg">
<img src="img/imatge.jpg"/>
<div id="infoImg">
#infoImg
</div>
</div>
<div class="contentDiv">
<div id="movContinuo">
#movContinuo
</div>
</div>
<div style="position:relative;width: 100%;">
<div id="divMobil" style="position:relative">
#divMobil
</div>
</div>
</body>
</html>
-
Me parece bien que te exijan que presentes los códigos por separado, pero entiende que para mí es más cómodo de esta forma, solo quería saber si te funciona o no el código que te puse, a partir de ahí, separarlo en html/css/js es fácil.
Lo único raro que veo en tu código html es que no hay ninguna línea que cargue el archivo css, algo como esto:
<link rel="stylesheet" type="text/css" href="nombreArchivo.css">
Saludos.
-
Hola¡¡
Pues ese era el fallo, no poner la linea que enlaza con el codigo css, ya funciona todo, de la otra manera me funcionaba todo menos la ultmia funcion, pero me parecia extraño como se veian los divs
Un saludo
-
Ahora tengo duda en este, en el que hay que llamar una funcion, me funciona que se mueve el div a la derecha pero luego ya no hace nada.
9.6 Al clicar encima de #movContinuo se mueva continuamente el elemento #divMobil de izquierda a derecha. Para conseguirlo utiliza la propiedad complete de animate para que una vez haya terminado la animación hacia la derecha, llame a una función que realize la animación a la izquierda
Este es el codigo
$("#movContinuo").click(function () {
$("#divMobil").animate({"left": "1400px"}, {complete: function () {
$(this).animate({"right": "1400px"});
}
});
});
-
Prueba con esto.
$("#movContinuo").click(function () {
empezarAnimacion();
function empezarAnimacion() {
$("#divMobil").animate(
{left: "200px"},
{duration: 2000,
complete: function () {
$(this).animate(
{left: "0px"},
{duration: 2000,
complete: empezarAnimacion}
);
}
});
}
});
Saludos. ;D
-
Perfect ;D
como hago para que al clicar por segunda vez sobre #movContinuo se detenga el movimiento #de divMobil con la función .stop( ).
-
Hola javimf.
Al tener que ser con el mismo botón, solo se me ocurre que se solucione con un if, y creando una variable global para almacenar si la función está ejecutándose en ese momento o no.
var ejecutandose = false;
$("#movContinuo").click(function () {
if(!ejecutandose){
ejecutandose = true;
empezarAnimacion();
} else {
ejecutandose = false;
$('#divMobil').stop();
}
function empezarAnimacion() {
$("#divMobil").animate(
{left: "200px"},
{duration: 2000,
complete: function () {
$(this).animate(
{left: "0px"},
{duration: 2000,
complete: empezarAnimacion}
);
}
});
}
});
Saludos. ;D
-
Perfecto, funciona bien.
Feliz año ;D