Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

132
Vistas
How to switch between two images instantly?

I have a drawer that serves as a menu. There is an image on top and icons on the bottom. When the user hovers over the drawer, it expands to show a larger image and icons with text.

My problem is: during this enlargement transition, the first image enlarges (Not good) and stays for 1 ~ 5 seconds then, gives way to the second one.

I would like to make it so that when the user hovers over the drawer the first image is hidden immediately to make room for the second. I want this "delay" to be removed.

(The fact that the menu does not react immediately when you hover is another problem ^^)

Here is a gif of the problem : https://gyazo.com/064245b3bc87cabf6ffa62b51c506025

And this is the code that I use to switch between these 2 images :

 <a href={'/'} className={'brand'}>
{sideWidth >= 200 ?
<img src={'/images/SI_Infra.svg'} className={"logoHub"} alt={"Logo Si infra"} href={'/'}/> 
    :
<img src='/images/SI.svg' className={"logoHub"} alt={"Logo Si infra"} />
}
</a>

Is there an easier or "faster" way to make this image transition?

(Or maybe the problem is with my PC (It's local))

If you need more visible code tell me.

EDIT :

With the help and advise of all members, the problem is solved ! The code :

            <a href={'/'} className={'brand'}>
                {sideWidth >= 200 ?
                <>
                  <img src={'/images/SI_Infra.svg'} className={"logoHub"} alt={"Logo Si infra"} href={'/'}/>
                  <img src={'/images/SI.svg'} className={"logoHub"} alt={"Logo Si infra"} style={{display:'none'}} />
                </>
                    :
                <>
                  <img src={'/images/SI_Infra.svg'} className={"logoHub"} alt={"Logo Si infra"} href={'/'} style={{display:'none'}}/>
                  <img src={'/images/SI.svg'} className={"logoHub"} alt={"Logo Si infra"} />
                </>
                }
            </a>

As Maxdola advised me, I render both images but decide to hide one with "display: 'none'". This may not be the best solution but it solves my problem! Thanks a lot !

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

The problem is you are re-rendering the image and because of that the browser then downloads the image.

You should render both images, but make one Invisible.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda