Question

Possible Duplicate:
How could someone replicate the Follow/Unfollow hover action on Twitter's website using Twitter Bootstrap?

I’m creating a Twitter-like follow button. The code is at http://jsfiddle.net/RQSsz/9/.

<button type="submit" value="" class="btn follow following " title="In bookmarks">
    <i class="bookmarked"></i><span>In bookmarks</span>
</button>
<button type="submit" value="" class="btn follow unfollow displaynone" title="From bookmarks">
    <i class="unfollow"></i><span>From bookmarks</span>
</button>

$('.btn.follow.following').live('mouseover mouseout', function(event) {
    if (event.type == 'mouseover') {
        $(".btn.follow.following").toggleClass("displaynone");
        $(".btn.follow.unfollow").toggleClass("displaynone");
    } else {
        $(".btn.follow.following").toggleClass("displaynone");
        $(".btn.follow.unfollow").toggleClass("displaynone");
    }
});

I have an issue with the flicker of the button. What am doing wrong?

Answer 1

The hiding of the button triggers the hover event, which causes the button to be hidden, which triggers the hover event, etc, etc, etc.

Firstly, your selector is nonsense. You want to select both your buttons:

$('.follow, unfollow')

Secondly, why bother toggling a class? This means you are depenent on an initial state. Just use the show() / hide() method instead:

$(".btn.follow.following").hide();
$(".btn.follow.unfollow").show();

and

$(".btn.follow.following").show();
$(".btn.follow.unfollow").hide();

I’ve modified you demo and it now should work.

http://jsfiddle.net/mGGae/1/