Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

240
Views
Cómo desvanecerse cambiando la imagen de fondo

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

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

He intentado poner desvanecimiento en tantos lugares.

Gracias

over 4 years ago · Santiago Trujillo
3 answers
Answer question

0

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);
over 4 years ago · Santiago Trujillo Report

0

¿Puedo ofrecer una solución alternativa?

Tuve el mismo problema y el desvanecimiento no funcionó porque desvaneció todo el elemento, no solo el fondo. En mi caso el elemento era el cuerpo, así 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.

over 4 years ago · Santiago Trujillo Report

0

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 transición CSS3 .

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

Ahora cambia el fondo

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

¡Voilà, se desvanece!


Descargo de responsabilidad obvio: si su navegador no es compatible con la propiedad de transition CSS3, esto no funcionará. En cuyo caso, la imagen cambiará sin transición. Dado que <1% de los navegadores de sus usuarios no son compatibles con CSS3, probablemente esté bien. No te engañes, está bien.

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!