如何緩慢更改一個h1的字母間距，一旦它所在的div被點擊了？

我有一個名爲'.social'的類，我點擊div後就可以打開它。 Inside是一個switch case語句，一旦它被點擊，如果再次點擊它，div就會關閉。我只在其中顯示一個字母，使用「溢出」和字母間距屬性來隱藏其餘字母。一旦div被點擊，我想擴展div，並一起縮小字母間距，以便顯示所有的單詞。如何緩慢更改一個h1的字母間距，一旦它所在的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; 
}

來源

2013-04-04 Karmaxdw

最簡單的方法是將letter-spacing風格移到.social DIV和動畫它在那裏，使用相同的animate函數調用作爲width。

JSFiddle Demo

.social { 
    letter-spacing: 50px; 
    ... 
} 
... 
$(this).stop().animate({ width: '150px', letterSpacing: '0px' }, 500); 
... 
$(this).stop().animate({ width: '50px', letterSpacing: '50px' }, 500);

來源

2013-04-04 19:30:40

現在完美地工作，感謝小提琴。不能爲你+1，因爲我不是15，但如果我能我會的！ – Karmaxdw 2013-04-04 19:41:18

@Karmaxdw你爲什麼不接受答案？人們會停止回答你的問題。你有沒有注意到這裏的「正確」答案附近的綠色複選標記？ – 2013-04-05 18:30:03

您需要的字母間距設置爲有效的值：

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

還有什麼你有問題與？這是我可以從你的帖子中收集到的唯一問題。

編輯：

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

來源

2013-04-04 19:19:06 Lowkase

對不起，我應該已經指定了什麼我的問題是。這改變了字母間距的問題，但我不知道如何設置持續時間。我切換到$（'。social h1）.animate，但無濟於事。 – Karmaxdw 2013-04-04 19:23:39

簡單地使用動畫，就像您爲寬度所做的那樣，但使用字母間距作爲屬性。我對我的帖子進行了編輯。這有幫助嗎？ – Lowkase 2013-04-04 19:28:43

它不適合我。該框擴展並且單詞滑過，但不會更改字母間距 – Karmaxdw 2013-04-04 19:32:14

如果您想要進行動畫字母間距這部作品與jQuery 1.8.1+

$('.social h1').animate({'letter-spacing': '0px'}, 5000)

來源

2013-04-04 19:30:49 Maibock

如何緩慢更改一個h1的字母間距，一旦它所在的div被點擊了？

回答

相關問題