スライドのブートストラップ要素をインラインで

Question

私の問題は、既存のテキストをインラインで前置要素（グリフコン）に保持しています。

私はテキストを持っています。ユーザーがマウスを動かすと、JQuery UI 1.10.2のスライドエフェクトが付いたアイコンが追加されます。しかし、プリペンドされたアイコンは、テキストを新しい行にプッシュします。

これは私のhtmlです：

<div class="hover-me"> 
    <h4>My title</h4> 
</div> 

とjQuery：

$('.hover-me').hover(function() { 
    $('<span class="glyphicon glyphicon-chevron-right" aria-hidden="true" style="display: none; font-size: 15px;"></span>&nbsp;').prependTo($(this).find('h4')).toggle('slide', { direction: 'left' }, 400); 
}, 
function() { 
    $(this).find('.glyphicon').hide().toggle('slide', { direction: 'right' }, 400); 
}); 

私もJSFiddleにいくつかの例を行いました。

2番目の問題はhideleffect（mouseleaveイベント）です。アイコンは右から左にスライドしますが、非表示にはなりません。

グリフコンとテキストを1行に保存するにはどうしたらいいですか？mouseleaveイベントでアイコンが消えないのはなぜですか？

Answer 1

あなただけのhtmlでgliphiconを定義することができます。

<div class="hover-me"> 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true" style="display: none; font-size: 15px; line-height: 35px;"></span>&nbsp;<h4>My title</h4> 
</div> 

$('.hover-me').mouseenter(function() { 
    $(this).find('.glyphicon').show('slide', { direction: 'left' }, 400); 
}); 
$('.hover-me').mouseleave(function() { 
    $(this).find('.glyphicon').hide('slide', { direction: 'right' }, 400); 
}); 

をブロックが左浮かべ作る新しい行に折り返しのあるテキストを防ぐために：

.hover-me span, .hover-me h4{ 
    display: block; 
    float: left; 
}