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
    Oct 2011
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    animate Fade in border?

    So I'm trying to modify this code to make it so a 1px border fades in on rollover of an image.

    My CSS for the images has this class for an invisible border:
    Code:
    border: solid 1px rgba(242, 112, 17, .0);
    I was assuming using this part of the Javascript code below that I could animate some kind of borderOpacity or something like that so the border would fade in from .0 to 1.

    Code:
    $('.item li img').animate({'opacity' : 1}).hover(function() {
    					$(this).animate({'borderOpacity' : 1});
    				}, function() {
    					$(this).animate({'opacity' : 1});
    				});
    But I obviously am doing something wrong.

    Any help would be greatly appreciated. Thanks!

  • #2
    New Coder
    Join Date
    Oct 2011
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile

    Figured it out.
    Had to add a Jquery "jquery.color.js" to the header. Then it was just a matter of changing borderColor to backgroundColor.

    CSS:
    Code:
    ul.item li img {
    		padding:2px;
    		background-color: #fff;
    	}
    Java:
    Code:
    $('.item li img').animate({'opacity' : 1}).hover(function() {
    					$(this).animate({'backgroundColor' : '#F27011'});
    				}, function() {
    					$(this).animate({'backgroundColor' : '#fff'});
    				});


  •  

    Posting Permissions

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