使用jQuery/jQuery UI滑動文字

我有一個強調詞的句子。這個強調的單詞將通過向上滑動而消失，並被另一個滑動的單詞取代。我試着使用jQuery（EDGE）和jQuery UI的1.8.9像這樣（see fiddle），但不能讓它運行：使用jQuery/jQuery UI滑動文字

HTML

<p>This is my text 
    <span>one</span> 
    <span>two</span> 
    <span>three</span> 
    <span>four</span> 
    <span>five</span> 
without fear.</p>

CSS

span { 
    display: none; 
    color: red; 
} 
span:first-child { 
    display: inline-block; 
}

的JavaScript

$(function() { 
    var first = $('span:first-child'); 
    replaceWord(first); 
}); 

function replaceWord(word) { 
    var next = word.next(); 
    if (typeof(next) != "undefined") { 
     first.hide("slide", { 
      direction: "up" 
     }, 500, function() { 
      next.show("slide", { 
       direction: "down" 
      }, 1000); 
      replaceWord(next); 
     }); 
    } 
}

想知道我在找什麼：我設法得到了這個效果，但沒有打電話給fu nction遞歸地和jQuery 1.9.1/jQuery UI 1.9.2 on this fiddle。這有一個CSS錯誤，所以它適用於display: block而動畫。

任何想法？

來源

2015-04-28 user2339252

使用浮動：左似乎工作...

http://jsfiddle.net/apcwonn7/2/

<p><span>This is my text</span> 
    <span class='a'>one</span> 
    <span class='b'>two</span> 
without fear.</p> 
<button id="go">Go</button>

的Javascript：

$(function() { 
    $('span.a').show(); 
}); 

$('#go').click(function() { 
    var first = $('span.a'); 
    var next = $('span.b'); 
    console.log(first, next); 
    first.hide("slide", { 
     direction: "up" 
    }, 500, function() { 
     next.show("slide", { 
      direction: "down" 
     }, 1000); 
    }); 
});

CSS：

span { 
    float: left; 
} 

span.a { 
    display: none; 
    color: red; 
} 

span.b { 
    display: none; 
    color: blue; 
}

來源

2015-04-28 13:42:15 jt000

我一直在玩的答案，認爲這可能有助於在這裏http://jsfiddle.net/apcwonn7/張貼3/ – Cobote

@ jt000你的小提琴示例不起作用。點擊按鈕不會做任何事情。 –

@ jt000您需要將URL更改爲HTTP而非HTTPS才能使其正常工作。 – Cobote

這裏是你的代碼修正（仍然不好的結果，但它的工作現在）：

JS：

$(function() { 
    var first = $('span:first-child')[0]; //It's an array 
    replaceWord(first); 
}); 

function replaceWord(word) { 
var next = $(word).next(); //next is a jQuery func 
if (typeof(next) != "undefined") { 
    $(word).hide("slide", { //same with hide 
     direction: "up" 
    }, 500, function() { 
     $(next).show("slide", { 
      direction: "down" 
     }, 1000); 
     replaceWord(next); 
    }); 
    } 
}

來源

2015-04-28 13:47:40 Pleasure

使用jQuery/jQuery UI滑動文字

回答

相關問題