En esta lección, hablaremos sobre el efecto en el que hay un cambio suave en el fondo de un objeto como resultado de pasar el cursor del mouse sobre él.
Al principio, como probablemente ya te hayas acostumbrado (si no es la primera vez que lo usas jQuery biblioteca), conectar jQuery V
nuestro sitio.
por el mismo jQuery, también necesitamos interfaz de usuario de jQuery.
Si está familiarizado con los principios jQuery, entonces debemos recordar que en la cabecera debemos colocar el código de llamada, en este caso la animación de cambio de color, para que cargue antes de que cargue el contenido principal de la página. $(documento).ready(función() ( // ponga su código de llamada de animación aquí ));
Aquí hay un marcado de ejemplo html.
El Portal original ya es una cosa de culto e inesperada para su época. No hace más que confirmar una vez más la tesis, comprobada a lo largo de los siglos, sobre el triunfo de las ideas sobre las tecnologías avanzadas.
El estilo CSS de nuestra página se ve así.
png); alineación de texto: izquierda; color:#333; ancho: 800px; tamaño de fuente: 14px; font-family:georgia, "time new romances", serif; margen: 0 automático; relleno: 0; ) a( color:#333; texto-decoración:ninguno ) a:enfoque ( contorno: ninguno ) h1 ( tamaño de fuente: 34px; familia de fuentes: verdana, helvetica, arial, sans-serif; espaciado entre letras:- 2px; color:#394BEA; font-weight:700; padding:20px 0 0; text-shadow:0 1px 1px #70C5ED; ) h2 (font-size: 24px; fuente-familia: verdana, helvetica, arial, sans- serif; color:#5C81CB; font-weight: 400; padding: 0 0 10px; text-shadow:0 1px 1px #70C5ED; ) h3, h3 a( font-size:14px; font-family:verdana, helvetica, arial , sans-serif; espaciado entre letras:-1px; color:#333; peso de fuente: 700; transformación de texto:mayúsculas; margen:0; relleno:8px 0 8px 0; ) p ( color:#333; float: izquierda; altura de línea: 22 px; margen: 5 px; relleno: 0 0 10 px; ) #container ( margen: 0; relleno: 0; ) .boxes ( fondo: #fff; borde: 1 px sólido #ccc; float: izquierda; padding:10px; position:relative; width:600px; ) img ( border:5px solid #CCCCCC; ) div.info ( border-bottom:1px solid #CCCCCC; float:left; margin:0; padding:0; width: 100%; ) .bloque (color:#0066CC; flotador izquierdo; desbordamiento: oculto; posición: relativa; ancho: 600px; ) .block h4, .block h4 a( color:#333333; font-size:11px; padding:5px 0; text-shadow:0 1px 1px #CEDEFD; text-transform:mayúsculas; )
DIV elemento que tiene una clase .cajas- es un elemento, un bloque cuyo color queremos cambiar.
Este es el código que llamaremos en el encabezado.
$(documento).ready(función()( $(".boxes").hover(función() ( $(this).stop().animate(( backgroundColor: "#40B8FE"), 800); ), function() ( $(this).stop().animate(( backgroundColor: "#ffffff" ), 800); )); )); En parámetros color de fondo se establece el color y el valor 800 es la velocidad de la animación.
Hay una capa con texto y un botón, cuando se hace clic, debe cambiar el color del texto para esta capa.
Hoy aprenderemos a hacer cambio de color de bloque suave con css y jquery. Con este complemento, puede lograr resultados de diseño increíblemente hermosos. Por ejemplo, puede crear un menú genial que cambiará de color suavemente al pasar el mouse sobre él, y créanme, se ve muy bien.
Para empezar entre etiquetas Y tienes que poner lo siguiente:
Luego otra vez entre las etiquetas
Y copia este script:
Dónde .caja- esta es la clase de bloque que se nos ocurrió anteriormente en CSS.
"#FF4500" - color de libración. 400 - Velocidad de animación de desplazamiento.
"#ffffff"— color inicial después de quitar el cursor. 400 - velocidad de animación cuando se quita el cursor.
Después de haber hecho todo como se describe arriba, el color del bloque cambiará suavemente. Para insertar dicho bloque en la página, solo necesita agregar lo siguiente en el lugar correcto:
Y aparecerá el bloque.
Este complemento solo puede cambiar el color de fondo (background). Por ejemplo, no será posible adjuntarlo a enlaces o al texto. El color de los enlaces se cambia con otro complemento (definitivamente escribiré cómo hacerlo pronto).
Si desea que los bloques en la página tengan diferentes colores, como tengo en , necesitará entre las etiquetas
Y coloque varios guiones en una fila y, en consecuencia, no olvide cambiar el color al deseado. Lo más importante es cambiar la clase, por ejemplo, en nuestro ejemplo anterior: la clase Caja, y el siguiente script debería estar con una clase diferente, como caja1, entonces caja2 etcétera.Eso es todo, queridos amigos. Si no entiende algo, asegúrese de preguntar en los comentarios. Nos vemos pronto.
De alguna manera, frente a la necesidad de escribir el efecto del texto que fluye de un color a otro, de repente descubrí por mí mismo que esta no es una tarea tan trivial.
Solo puede dejar una marca de verificación delante de Núcleo de efectos. Es este módulo el que extiende el método jQuery.animate() que necesitamos, solo incluye el ensamblado descargado:
Después de eso, el color del texto, el marco o el fondo de cualquier elemento de la página está disponible para la animación.
Ahora que todo está en orden con la animación, hay una segunda característica que complica la tarea: hacer un retraso entre la animación de los elementos de la colección.
Digamos que tenemos una colección de elementos de lista ordenados:
Var $elementos = $("ol > li");
La animación de cada siguiente elemento de la colección debe comenzar con cierto retraso después del anterior.
Puede lograr el resultado deseado usando el siguiente código:
Para (var i = 0; i
Tenga en cuenta que setTimeout() toma una función que devuelve otra función como primer parámetro.
Si esto no se hace, entonces se pasará la variable i por referencia, y cuando llegue la función timer, tendré su último valor igual a $elements.length , ya que para ese momento el bucle for ya ha terminado y la animación no ser realizado en absoluto.
Usando una función anidada, copiamos el valor de i en cada iteración del bucle, con la ayuda de la cual logramos operación correcta concebido.
Puede usar dicha animación, por ejemplo, para mostrar que en alguna lista de parámetros debe seleccionar al menos uno o simplemente para llamar la atención sobre algún bloque de la página.
