Promote words with jQuery / jQuery UI
I have a sentence with an underlined word. This underlined word will disappear, sliding up and being replaced by another word that also slides up. I've tried using jQuery (edge) and jQuery UI 1.8.9 like this ( see Fiddle ) but can't get it to work:
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);
});
}
}
To get an idea of what I'm looking for: I managed to get this effect but not call the function recursively and with jQuery 1.9.1 / jQuery UI 1.9.2 on this fiddle . And it has a CSS bug, so it gets applied display: block
during animation.
Any ideas?
+3
source to share
2 answers
Using float: left seems to work ...
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;
}
0
source to share
Here is your code corrected (still not a good result, but it works now):
JS:
$(function () {
var first = $('span:first-child')[0]; //It 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);
});
}
}
0
source to share