1

私は小さなウェブサイトを構築していますが、jQuery アニメーションに問題があります。基本的に、円 (別の div) 内に小さなテキスト (1 文字の div) を配置し、ユーザーがホバーしたときに拡大したいと考えています。内側の div (テキスト) を元の位置に保ちながら、円は mouseleave() イベントで元のサイズに縮小します。拡大/縮小部分は非常にうまく機能しています。問題は、mouseenter() で位置が変わる内部テキストにあります。

ここにHTMLがあります

 <body>
 <div class="steps">
    <div id="one" class="number">
        <div id="num-text">
            <p><strong>1</strong>
            </p>
        </div>
    </div>
 </div>
 </body>

'steps' がコンテナーとして機能し、'number' が実際の円です! この質問の JSFiddle へのリンクは次のとおりです: http://jsfiddle.net/Rockr90/hZSKA/

ありがとうございました ！

編集: 実際には、ちらつきは Chrome でのみ発生します。CSS3 の例は IE と FireFox で期待どおりに動作します。おそらく webkit と関係がありますか?

4

3 に答える 3

1

これは CSS だけで可能です。これには jQuery は必要ありません。この例でその方法を説明します。完全に中央揃えのテキストに display table-cell を使用できるように、円に display table を使用しました

HTML

<div class="circle">
    <p>1</p>
</div>

CSS

.circle {
    position:relative; //set up a position, not needed, but for example
    top:100px;
    left:100px; // width and height
    width:100px;
    height:100px;
    display:table; // display table for centered <p> with table-cell
    background-color:blue;
    border-radius:50%; // make it a circle!
    -webkit-transition: all 0.5s; // transition
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

.circle:hover {
    margin-left:-10px; // on hover we will increase the height and width
    margin-top:-10px; // we will also set the margin to - to make it stay on the same spot, +20 in height and width means -10 in margin
    width:120px;
    height:120px;
}

.circle p {
    display:table-cell; // display table-cell magic
    vertical-align:middle; // put the text in the middle!
    text-align:center;
    font-size:2em;
    color:white;
}

フィドル

http://jsfiddle.net/n6D46/

于 2013-08-30T15:35:52.330 に答える
1

高さを#num-text指定すると、すでに持っている絶対位置を使用して垂直方向に中央に揃えることができます。

#num-text {
    position:absolute;
    text-align:center;
    color:#eee;
    font-size:24px;
    width:100%;
    height: 24px;
    top:50%; margin-top:-12px; }

ここでフィドルを参照してください：http://jsfiddle.net/hZSKA/1/

補足として、CSS3 を使用してこれと同じ効果を実現することはおそらく可能ですが、それは古いブラウザーとの下位互換性がない可能性があります。

于 2013-08-30T15:29:33.013 に答える