1

ここで達成しようとしていることの JSFiddle があります > JSFIDDLE CODE

問題は、開いたときと閉じたときに小さな正方形に戻るときに弾性効果を与える方法がわからないことです。ただし、現在、ホバーするとおかしくなります:o)。また、サイズが変更されると、テキストが狂ったように押し込まれます。ボックスの形状に関係なく、テキストを同じように表示するにはどうすればよいですか?

JS コード:

$('#menuSquare').mouseover(function() {
    $('#menuSquare').animate({
        width: "95",
        height: "400",
        padding: '20',
        opacity: 0.8
    }, 1000)
});

$('#menuSquare').mouseout(function() {
    $('#menuSquare').animate({
        width: "20",
        height: "20",
        opacity: 0.4
    }, 1000)
});

HTML:

<div id="menuSquare" class="TheMenuBox">
      <p><a href="#" style="text-decoration:none; color:#666;">Category 1</a></p>
      <p><a href="#" style="text-decoration:none; color:#666;">Category 2</a></p>
      <p><a href="#" style="text-decoration:none; color:#666;">Category 2</a></p>
</div>​

CSS:

body,td,th {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color:#666;
}
body {
    background-color: #0CF;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}

.TheMenuBox {
    position:absolute; 
    background-color:#FFF; 
    width: 20px; /* 95 */
    display:block; 
    height: 20px;
    top:16px; 
    left:260px; 
    opacity:0.40; 
    filter:alpha(opacity=40); 
    z-index:1000; 
    padding:0px; /* 20 */
    text-transform:uppercase; 
    text-decoration:none;
    overflow: hidden;
}

誰でもこれを手伝ってもらえますか?

4

1 に答える 1

2

ボックスのコンテンツを絶対に設定する必要があるだけです。これは、inner というクラスでコンテンツを div にラップすることで行いました。

.inner {position:absolute;top:20px;left:20px; width:95px;}

.animate 呼び出しの前に .stop() を追加して、別のアニメーションが反対の方法でアニメーション化しようとしている間にそれらの発火を停止します。

$('#menuSquare').stop().animate({

私のフィドルを参照してください... http://jsfiddle.net/HRGKq/9/

マット

于 2012-12-06T03:28:47.990 に答える