CodingForums.com

CodingForums.com (http://www.codingforums.com/index.php)
-   JavaScript frameworks (http://www.codingforums.com/forumdisplay.php?f=62)
-   -   Animate background image up? (http://www.codingforums.com/showthread.php?t=289456)

jarv 03-08-2013 11:52 AM
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});
                        });

harbingerOTV 03-08-2013 01:52 PM
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.

jarv 03-08-2013 02:18 PM
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});
                        });

harbingerOTV 03-08-2013 03:34 PM
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});
                        });

jarv 03-08-2013 07:28 PM
yes close, thanks.
I have got to this stage before:
http://staging.graphitedigital.com/2013/dev/#

it's suppose to be orange underneath though?!

jarv 03-10-2013 07:25 PM
can anyone help here please?


All times are GMT +1. The time now is 12:25 AM.

Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.