Member Avatar for dominique7

Hi,

I'd like to have a slowly shifting effect in my menu-items on mouseover, which makes the menu-item stand out.
An animated Gif worked fine, but only for the shifting-in of the effect (colour/contrast/form of letters), while I would like the effect to shift-out slowly when the mouse focus is lost.
And I couldn't think of simple html/css with an animated gif to do that.

What would be easiest to realize what I'm looking for?
To use flash or to use a bit of java script? Or something else?

Thanks for reading!
Dominique

  • 3 Contributors
  • 2 Replies
  • 106 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by PixelExchange

Dani AI

Generated

— quick, modern approach that builds on the ideas in this thread ( and ): avoid Flash (deprecated) and animated GIF tricks for reversible fades. Use CSS transitions for a smooth mouseover + slow mouse-away effect; add a tiny bit of JavaScript only if you need asymmetric timings or extra control.

Example (CSS-only, works for keyboard focus too):

/* base link */
.menu-item a {
  display: inline-block;
  color: #222;
  transform: translateY(0);
  opacity: 1;
  transition: transform 180ms ease, opacity 180ms ease, color 180ms ease;
}

/* hover / focus: fast in */
.menu-item a:hover,
.menu-item a:focus {
  transform: translateY(-4px);
  opacity: 0.95;
  color: #0077cc;
}

/* respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .menu-item a { transition: none; transform: none; }
}

That handles fade-in on hover and a smooth fade-out when the mouse leaves, with good performance because it animates opacity and transform (composite-only in modern browsers). If you want the fade-out to be slower than the fade-in, toggle the transition-duration in JS on mouseenter / mouseleave and let CSS handle the visuals — this is more reliable than trying to drive direction with GIFs.

Small JS pattern for asymmetric timing:

el.addEventListener('mouseenter', () => el.style.transitionDuration = '150ms');
el.addEventListener('mouseleave', () => el.style.transitionDuration = '600ms');

Notes: test touch behavior (hover is not present on many phones), include :focus for keyboard users, and use [prefers-reduced-motion] for accessibility. For reference on CSS transitions and prefers-reduced-motion, see MDN: Using CSS transitions and prefers-reduced-motion.

Recommended Answers

All 2 Replies

Member Avatar for Member #334542

You can do with Jquery and CSS. Or with flash that simple to do that.

Member Avatar for PixelExchange

You can use an animated gif for the slow fade-out effect too; however, the animated gif itself would have to be a slow animation of the effect you desired. On mouse focus lost, play your slow gif image.

On the other hand, flash is far easier to use for the effect you want then the above method.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.