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 6 of 6
  1. #1
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts

    Question Animate background image up?

    Hi, On my site in my footer I have some social media icons that animate the background up when I hover over.

    I would like to do this on my 4 main boxes: Who, work, blog, contact
    as you can see, I have attempted it on the first box: "Who are we?"

    here is my site:

    http://staging.graphitedigital.com/2013/dev/#

    Javascript
    Code:
    jQuery('ul#sections li#who').hover(function() {
    				jQuery(this).stop().animate({
    					marginTop : '-182px'
    				}, {queue:false,duration:600,easing:'easeInOutQuint'});
    				}, function(){
    					jQuery(this).stop().animate({
    					marginTop : '0px'
    					}, {queue:false,duration:850});
    			});

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    You could always leave the simple color swap you have now for default and then use CSS3 for the browsers that like it:
    transition: background-position
    http://www.impressivewebs.com/demo-f...mated-sprites/

    If you want to use jQuery like you are trying to do, you are moving the wrong thing.

    Code:
    jQuery('ul#sections li#who').hover(function() {
    				jQuery(this).stop().animate({
    					marginTop : '-182px'
    That moves the <li> itself. You want to animate the background-position of the <li> instead.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    ok thanks, I have added <span></span> inside the <li> and targeted that but it's not working?!

    Code:
    			jQuery('ul#sections li#who a span').hover(function() {
    				jQuery(this).stop().animate({
    					marginTop : '-182px'
    				}, {queue:false,duration:600,easing:'easeInOutQuint'});
    				}, function(){
    					jQuery(this).stop().animate({
    					marginTop : '0px'
    					}, {queue:false,duration:850});
    			});

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Remove the background from the LI and give it to the SPAN.

    Code:
    ul#sections li#who a span {
        background: url("../_img/AboutBox_image.png")top left no-repeat;
        position: absolute; 
        width: 100%; 
        height: 100%; 
        top: 0; 
        left: 0;
    }
    then (untested but close if not) :

    Code:
    			jQuery('ul#sections li#who a').hover(function() {
    				jQuery('span', this).stop().animate({
    					top : '-182px'
    				}, {queue:false,duration:600,easing:'easeInOutQuint'});
    				}, function(){
    					jQuery('span', this).stop().animate({
    					top : '0px'
    					}, {queue:false,duration:850});
    			});
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #5
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    yes close, thanks.
    I have got to this stage before:
    http://staging.graphitedigital.com/2013/dev/#

    it's suppose to be orange underneath though?!

  • #6
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    can anyone help here please?


  •  

    Posting Permissions

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