使用JQuery在窗體中循環佔位符文本？

Question

我對JQuery相當陌生，所以我不確定從哪裏開始解決這個問題。

我在網站上有一個表單，我想暫時顯示各種佔位符並循環瀏覽它們（模仿用戶可以在其中輸入的多個選項;例如Alice，Bob，Charles等，以輸入NAME表單輸入）在用戶點擊輸入自己的文字之前。

我發現此示例 - http://jsfiddle.net/eFjnU/（代碼如下） - 循環顯示文本，但我怎樣才能將它應用於表單輸入區域中的臨時佔位符？

HTML

<div id="content-1">Sample text 1</div> 
<div id="content-2">Sample text 2</div> 
<div id="content-3">Sample text 3</div> 
<div id="content-4">Sample text 4</div> 
<div id="content-5">Sample text 5</div> 
<div id="content-6">Sample text 6</div> 
<div id="content-7">Sample text 7</div> 

JQuery的

var divs = $('div[id^="content-"]').hide(), 
    i = 0; 

(function cycle() { 

    divs.eq(i).fadeIn(400) 
       .delay(1000) 
       .fadeOut(400, cycle); 

    i = ++i % divs.length; 

})(); 

您可以從DIV上述改變輸入，但將週期的整個輸入框和退出，而我只想要佔位符文本淡入/淡出。

EDIT 1：

例如：

<input type="text" name="whatever" type="text" placeholder="Alice"> 
<input type="text" name="whatever" type="text" placeholder="Bob"> 
<input type="text" name="whatever" type="text" placeholder="Charles"> 

Answer 1

你不能動畫佔位符的文本，但您可以創建一個週期性變化的屬性的功能：

Demo fiddle

var placeholders = ['Alice','Bob','Charles']; 

(function cycle() { 
    var placeholder = placeholders.shift(); 
    $('input').attr('placeholder',placeholder); 
    placeholders.push(placeholder); 
    setTimeout(cycle,1000); 
})(); 

這基本上你想要什麼減去淡入/淡出

Answer 2

的

佔位文本需要的容器。這可能是任何事情。像輸入字段上方或下方的跨度或標籤標籤一樣簡單。