Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jan 2010
    Location
    Wisconsin
    Posts
    24
    Thanks
    2
    Thanked 0 Times in 0 Posts

    jquery character selection

    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.

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    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>
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •