Слайд через jQuery/jQuery UI

Question

У меня есть предложение с подчеркнутым словом. Это подчеркнутое слово исчезнет, ​​сдвинувшись вверх и заменяясь другим словом, которое также скользит вверх. Я попытался с помощью JQuery (край) и JQuery UI 1.8.9, как это (see fiddle), но не могу заставить его работать:

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 во время анимации.

Любые идеи?

Answer 1

Использование поплавком: слева, кажется, работает ...

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; 
} 

Answer 2

Вот код исправлениями (все еще не хороший результат, но он сейчас работает):

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); 
    }); 
    } 
}