jquery - ejemplos - Cómo desvanecerse cambiando la imagen de fondo

jquery animate then

Question

Quiero atenuar las imágenes cuando hago este código:

$("#large-img").css(''background-image'', ''url(''+$img+'')'');

Intenté poner fade en muchos lugares.

Gracias

Answer 1

¿Puedo ofrecer una solución alternativa?

Tuve este mismo problema, y ​​fade no funcionó porque desvaneció todo el elemento, no solo el fondo. En mi caso, el elemento era cuerpo, por lo que solo quería desvanecer el fondo.

Una forma elegante de abordar esto es clasificar el elemento y usar la transición CSS3 para el fondo.

transition: background 0.5s linear;

Cuando cambia el fondo, ya sea con toggleClass o con su código, $("#large-img").css(''background-image'', ''url(''+$img+'')''); se desvanecerá según lo definido por la clase.

Answer 2

Alguien me señaló este hilo porque tenía el mismo problema pero no funcionó. Después de horas buscando, encontré una solución usando esto - https://github.com/rewish/jquery-bgswitcher#readme

Tiene algunas otras opciones además de desvanecerse también.

Answer 3

Basado en la solución anterior de Rampant Creative Group, estaba usando jQuery para cambiar la imagen de fondo de la etiqueta de cuerpo:

p.ej

$(''body'').css({''background'': ''url(/wp-content/themes/opdemand/img/bg-sea.jpg) fixed'', ''background-size'': ''100% 100%''});

$(''body'').css({''background'': ''url(/wp-content/themes/opdemand/img/bg-trees.jpg) fixed'', ''background-size'': ''100% 100%''});

Tenía un temporizador de JavaScript que cambiaba entre las dos declaraciones.

Todo lo que tuve que hacer para resolver el problema de crear un efecto fadeOut -> fadeIn fue utilizar la sugerencia de Rampant Creative Group y agregar

transition: background 1.5s linear;

a mi código Ahora se desvanece y brilla maravillosamente.

¡Gracias Rampant Creative Group y SoupEnvy por la edición!

Answer 4

Esta fue la única cosa razonable que encontré para desvanecer una imagen de fondo.

<div id="foo">
  <!-- some content here -->
</div>

Tu CSS; ahora mejorado con la transición de CSS3 .

#foo {
  background-image: url(a.jpg);
  transition: background 1s linear;
}

Ahora intercambia el fondo

document.getElementById("foo").style.backgroundImage = "url(b.jpg)";

Voilà, se desvanece!

Descargo de responsabilidad evidente: si su navegador no admite la propiedad de transition CSS3, esto no funcionará. En ese caso, la imagen cambiará sin una transición. Dado que <1% del navegador de tus usuarios no es compatible con CSS3, eso está bien. No te engañes a ti mismo, está bien.

Answer 5

Esto es probablemente lo que querías:

$(''#elem'').fadeTo(''slow'', 0.3, function()
{
    $(this).css(''background-image'', ''url('' + $img + '')'');
}).fadeTo(''slow'', 1);

Con un retraso de 1 segundo:

$(''#elem'').fadeTo(''slow'', 0.3, function()
{
    $(this).css(''background-image'', ''url('' + $img + '')'');
}).delay(1000).fadeTo(''slow'', 1);

Answer 6

Esto puede ayudar

HTML

<div id="textcontainer">        
    <span id="sometext">This is some information </span>
    <div id="container">

    </div>
</div>

CSS

#textcontainer{
    position:relative;
    border:1px solid #000;
    width :300px;
    height:300px;
}
#container{
    background-image :url("http://dcooper.org/gallery/cf_appicon.jpg");
    width :100%;
    height:100%;
}
#sometext{
    position:absolute;
    top:50%;
    left:50%;
}

Js

$(''#container'').css(''opacity'',''.1'');

Answer 7

Opacidad sirve su propósito?

Si es así, intente esto:

$(''#elem'').css(''opacity'',''0.3'')

Answer 8

Si intenta desvanecerse la imagen de fondo pero deja el texto / imágenes en primer plano, puede usar css para separar la imagen de fondo en un nuevo div y colocarla sobre el div que contiene el texto / imágenes, y luego desvanecer el fondo div.