views:

108

answers:

1

I know a glow around input fields is standard, but Twitter manages to fade it in smoothly. I've been looking around but can't seem to find a solid way to achieve this. How is this done?

+3  A: 

Here's how twitter does it:

HTML:

  <p class="search-holder" style="opacity: 0.6;">
    <label for="searchform_q">Search for a keyword or phrase…</label>
    <input type="text" tabindex="8" size="30" name="q" id="searchform_q" class="round-left" accesskey="/"><input type="submit" value="Search" tabindex="9" name="commit" id="searchform_submit" class="submit round-right">
  </p>

jQuery:

  $('.search-holder').mouseenter(function(){
        $(this).animate({opacity:1});
  }).mouseleave(function(){
        $(this).animate({opacity:0.6});
  });
Moin Zaman
Hey, I want to upvote but you should switch mouseover and mouseout to mouseenter and mouseleave because the descendants are triggering mouseover/mouseout over and over, creating a strobe effect.
attack
@attack: thanks mate, done!
Moin Zaman
It was actually the textboxes they use in your account settings for example, a fade in glow around the textbox but the opacity for the textbox itself is always 1. This is indeed what they did on the search textbox on the home, thanks for that!
Sten Van den Bergh