jquery character selection

Rebelj12a · 01-24-2010, 02:37 PM

I've been using jquery a little while now, basically im trying to fade individual characters in a word when the mouse hovers over them. I do not recall seeing any selector that would allow this but i figured someone might have an idea.

Thanks in advance.

harbingerOTV · 01-25-2010, 07:50 PM

See if this doesn't start you on the right direction:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {
/* start */

var str = $('.post p').html();
$('.post p').empty();

for (var i = 0, len = str.length; i < len; i++) {
    jQuery.each(str[i], function(index, item){
		$('.post p').append('<span>' + item + '</span>');  
    });
}

/* hover fade thingy */
	$('.post p span').each(function(int){
		$(this).bind('mouseover', function(){
			//if($(this).text() == 'b'){
				$(this).css({'opacity' : '0.4'});
			//}
		});
	});
/* end hover */

/* end */

	
});
</script>

<style type="text/css">
.post p span {
float: left;
padding: 5px;
}
</style>

</head>
<body>
<div class="post">
<p>abcdeabcde</p>
</div>
</body>
</html>