Comunidad de diseño web y desarrollo en internet

Cambiar background-image de un div con jQuery

Citar            
MensajeEscrito el 08 Sep 2012 02:49 pm
Hola a todos,

Tengo un div con un fondo y al pasar el mouse por encima cambia el fondo. El efecto funciona. Pero el problema que tengo es que, en el unico navegador que se ve perfecto es en Opera. En el resto de navegadores; Crhome, Firefox, IE9, Maxthom y Safari, cuando paso el mouse por encima cambia el fondo pero antes me hace un destello incomodo. ¿Como puedo solucionar este problema?

El codigo jQuery que tengo es el siguiente;

$(document) .ready (function () {
$(".contenedor").css ({'background-image': 'url(fondo_2.jpg)' })
});

Este codigo funciona perfecto, lo unico malo es el destello en algunos navegadores.

Muchas gracias por su ayuda.

Por andresw

2 de clabLevel



 

chrome
Citar            
MensajeEscrito el 08 Sep 2012 04:02 pm
Perdon.
Este si es el codigo:

$(document) .ready (function () {
/*Cambio de imagen de fondo*/
$(".contenedor").hover(function(){
$(".contenedor").css({'background-image':'url(fondo_2.jpg)'})
});
});

Por andresw

2 de clabLevel



 

chrome
Citar            
MensajeEscrito el 08 Sep 2012 05:26 pm
Seguramente te hace ese destello porque es una imagen grande o pesada y no esta cargada.

Por SinSemilla

Claber

336 de clabLevel



Genero:Masculino  

i am that i am...

chrome
Citar            
MensajeEscrito el 09 Sep 2012 11:44 pm
Si es cierto, también pense lo mismo. Pero como hago para cargar esa imagen, o para que se cargue antes de los efectos?

gracias por tu respuesta.

Por andresw

2 de clabLevel



 

chrome
Citar            
MensajeEscrito el 10 Sep 2012 01:34 am
Puedes hacer un sprite con imágenes de fondo, es decir pones las 2 fondos en una misma imagen, uno al lado del otro, luego con jquery mueves el fondo de posición en vez de cambiar la imagen.

si no sabes de que hablo, busca css sprites en google.

Por HtrMancera

Claber

342 de clabLevel

1 tutorial

Genero:Masculino  

Front-end Developer

chrome
Citar            
MensajeEscrito el 10 Sep 2012 05:25 pm
Gracias por tu ayuda.

Lo probaré y luego te cuento.

Por andresw

2 de clabLevel



 

chrome
Citar            
MensajeEscrito el 12 Ago 2017 02:24 am
http://www.poloralphlauren-shirts.us.com http://www.oakleysunglasseswholesaleonline.us.com http://www.uggoutlet.name http://www.adidasoutlet.us.org http://www.cheapuggs.eu.com http://www.coachoutletcoachoutletstore.us.com http://www.coachoutletonlineoutlet.us.com http://www.ralphlaurenoutletonlinestore.us.com http://www.oakleysunglasseswholesales.us.com http://www.canadagoosejacketsoutlet.com.co http://www.coachfactory-outlet.eu.com http://www.coachoutletonlinestoreofficial.us.com http://www.nikeoutlet.com.co http://www.michaelkorsoutletonlinestore.us.org http://www.cheapuggboots.name http://www.ralphlaurenpolouk.me.uk http://www.oakleysunglassesshopping.us.com http://www.moncleroutlets.us.com http://www.coachfactoryoutletmiami.us.com http://www.oakleysunglasseswholesaleok.us.com http://www.ugg-outletonline.us.org http://www.coachfactoryoutlet-coachoutlet.us.com http://www.pandoraoutlets.us.com http://www.ralph-laurenpolooutlet.us.com http://www.coach-outletonlines.eu.com http://www.cheapjordans-forsale.us.com http://www.michaelkorsoutletonlineshops.us.com http://www.uggbootsblackfridaysale.in.net http://www.ugg-outletonline.com.co http://www.uggsboots-australia.in.net http://www.michaelkors-outletofficial.us.com http://www.uggbootsblackfriday.in.net http://www.polooutlet.us.org http://www.coachfactoryoutleta.us.com http://www.longchampoutlet.us.org http://www.cheap-uggboots.us.org http://www.mlbjerseys.net http://www.michaelkors-handbags.in.net http://www.adidasshoes.us.org http://www.uggboots-clearance.com.co http://www.michaelkorsoutletclearancehandbags.us.com http://www.mont-blancpens.us.com http://www.canadagooseoutlet-store.com.co http://www.christianlouboutinoutlet-store.us.com 20170812WANGLILI

Por wanglili

13 de clabLevel



 

firefox

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.