0

ページに 3 つのアイコンが並んでいます。私が望んでいるのは、ユーザーがアイコンにカーソルを合わせると、小さなテキストスパンが左にスライドすることです。

そのため (ホバーなし): [IMG]

ホバー (テキストがスライドアウト): SOME TEXT [IMG]

各アイコンに次のコードを使用しています。

<div class="cgs"><span class="cgstext">1. Connect</span><a href="#"><img src="images/cgs/connect70h.png" width="69" height="70" alt="Connect"></a></div>

アイコンが左側にあり、テキストが右側にある場合、jQuery animate を使用して外側の div を拡張するだけです...しかし、左側のスパンを左側にスライドさせるために何をすべきか正確にはわかりません。私はそれが優雅にスライドすることを望み、それが2つのアイコンの間にある場合、可能であればスペースが優雅に拡大する（そしてホバーアウトすると優雅に収縮する）.

どんな助けでも大歓迎です！

4

1 に答える 1

2

これは、そこに到達するのに十分なはずです。html、css を変更し、いくつかの js を追加する必要がありました。幅を設定できないため、スパンは使用しないでください。したがって、animate役に立たなくなります。代わりに、div を に設定しましたinline-block。その後、適切にアニメーション化できます。残りは、とにかくすでに方法を知っているように聞こえる単なるjavascriptです。

画像にカーソルを合わせます。

http://jsfiddle.net/Mx2JS/3

<div class="cgs">
    <div class="cgstext">1. Connect</div>
    <a href="#"><img src="http://placehold.it/69x70" width="69" height="70" alt="Connect"></a>
    <a href="#"><img src="http://placehold.it/69x70" width="69" height="70" alt="Connect"></a>
    <a href="#"><img src="http://placehold.it/69x70" width="69" height="70" alt="Connect"></a>
</div>


$('a').hover( function() {
    $('div.cgstext').animate( { width:100 }, 500);
}, function() {
    $('div.cgstext').animate( { width:0 }, 500);
});
于 2013-01-24T21:34:25.507 に答える