2

div をクリックすると開く「.social」という名前のクラスがあります。内部には switch case ステートメントがあるため、一度クリックすると、もう一度クリックすると div が元に戻ります。「オーバーフロー」属性と文字間隔属性を使用して残りの文字を非表示にして、その中に 1 文字だけを表示しています。divをクリックしたら、divを展開し、文字間隔を一緒に減らして、すべての単語が表示されるようにします。

jQuery:

$(document).ready(function () {
var SocialClick = true;

$('.social').mousedown(function () {
    switch (SocialClick) {
        case true:
            $('.social h1').css({'letter-spacing': 'none'}, 1000);
            $(this).stop().animate({ width: '150px' }, 500);
            SocialClick = false;
            break;
        case false:
            $(this).stop().animate({ width: '50px' }, 500);
            SocialClick = true;
            break;
        }
    });
});

CSS:

.social {
    overflow: hidden;
    z-index: 50;
    display: block;
    float: right;
    margin-top: -52px;
    margin-right: 50px;
    width: 50px;
    height: 50px;
    background: #fff;
}

.social h1 {
    margin: 0;
    padding: 0;
    font-family: Calibri;
    font-size: 40px;
    color: #000;
    letter-spacing: 50px;
}
4

3 に答える 3

2

文字間隔を有効な値に設定する必要があります。

$('.social h1').css({'letter-spacing': 'normal'}, 1000);

他に何か困ったことはありませんか？それがあなたの投稿から収集できる唯一の質問です。

編集：

$('.social h1').animate({'letter-spacing': 'normal'}, 1000);
于 2013-04-04T19:19:06.817 に答える
2

最も簡単な方法は、letter-spacingスタイルをdiv に移動し、.socialそこでアニメーション化することですanimate。.width

JSFiddleデモ

.social {
    letter-spacing: 50px;
    ...
}
...
$(this).stop().animate({ width: '150px', letterSpacing: '0px' }, 500);
...
$(this).stop().animate({ width: '50px', letterSpacing: '50px' }, 500);
于 2013-04-04T19:30:40.167 に答える
0

文字間隔をアニメーション化しようとしている場合、これは jQuery 1.8.1+ で動作します

$('.social h1').animate({'letter-spacing': '0px'}, 5000)
于 2013-04-04T19:30:49.057 に答える