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?
views:
108answers:
1
+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
2010-09-05 20:58:25
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
2010-09-05 21:07:42
@attack: thanks mate, done!
Moin Zaman
2010-09-05 21:11:19
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
2010-09-06 20:58:29