Response title
This is preview!
Animated text-decoration and opacity
in Using jQuery
•
8 years ago
Hello, I have an H2 with 3 words which are links e.g.
Word1, Word2, Word3
To bring emphasis to these words, once the page has loaded I would like to animate these in sequence so that Word1 fades to 0.5 opacity, and gets an underline, then fades back to opacity: 1 and then once this sequence is complete, Word2 does the same, followed by Word3.
My thought was to assign each an id and perhaps use the blink effect together with addClass and removeClass
$(document).ready(function() {
function blink() {
$("#word1")
.addClass('underline')
.fadeTo(1000, 0.2)
.fadeTo(800, 1, function(){blink()
.removeClass('underline')
});
}
$(function(){
blink();
});
// Then once done, do the same for #word2
});
But my jQuery is not great and this doesn't work. Any suggestions/examples please?
Word1, Word2, Word3
To bring emphasis to these words, once the page has loaded I would like to animate these in sequence so that Word1 fades to 0.5 opacity, and gets an underline, then fades back to opacity: 1 and then once this sequence is complete, Word2 does the same, followed by Word3.
My thought was to assign each an id and perhaps use the blink effect together with addClass and removeClass
$(document).ready(function() {
function blink() {
$("#word1")
.addClass('underline')
.fadeTo(1000, 0.2)
.fadeTo(800, 1, function(){blink()
.removeClass('underline')
});
}
$(function(){
blink();
});
// Then once done, do the same for #word2
});
But my jQuery is not great and this doesn't work. Any suggestions/examples please?
1