2

我有一个名为“.social”的类，一旦单击 div，我就会打开它。里面是一个 switch case 语句，因此一旦单击它，如果再次单击它，div 就会重新关闭。我只在其中显示一个字母，使用“溢出”和字母间距属性来隐藏其余字母。单击 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样式移动到.socialdiv 并在那里设置动画，使用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 回答