SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,617
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)

    [jQuery] change background-image using a transition/fade

    I'm trying to change the background image of a button. Using the css() function changes the background instantly. Is there a way to do a crossfade effect?

    Here's what I've got, but the fade effect doesn't work:

    Code JavaScript:
    var img_button_pos = 'images/forms/buttonbg_green.gif';
    var img_button_neg = 'images/forms/buttonbg_red.gif';
    var img_button = 'images/forms/buttonbg.gif';
     
    $().ready(function(){
     
    	$('button.type_pos').hover(
    		function(){
    			$(this).animate({backgroundImage: 'url("'+img_button_pos+'")'}, 500);
    		},
    		function(){
    			$(this).css('background-image', 'url("'+img_button+'")');
    		}
    	);
     
    });

    Code:
    <button type="submit" class="type_pos">Click Me</button>
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jQuery
    The .animate() method allows us to create animation effects on any numeric CSS property. The only required parameter is a map of CSS properties. [...] All animated properties should be numeric (except as noted below); properties that are non-numeric cannot be animated using basic jQuery functionality. (For example, width, height, or left can be animated but background-color cannot be.)
    http://api.jquery.com/animate/

    background-image isn't numeric, so it won't work.

    I think you will have to have IMG elements for the images, then you can crossfade them using fadeIn and fadeOut.

  3. #3
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,617
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    Somehow, I don't think an IMG element will work well inside of a button element as a background.

    Guess I'll have to skip this one if that's the only way.
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Or have two buttons, absolutely positioned on top of each other.

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could fade the original background to about 5&#37; or some low amount and then change the background source to the new image already set to the say 5% opacity then fade it in to 100%.

  6. #6
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    No, you can't fade backgrounds because you can't change the opacity of a CSS background image. You can only affect the opacity of entire DOM elements.

  7. #7
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,617
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    Using two buttons--that means you might run into the issue of having two buttons with the same name attribute.
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  8. #8
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Not really, one of them can just not have a name attribute at all. You can generate the extra button with JavaScript, and remove one button after the crossfading is done.

  9. #9
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,617
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    What if it's clicked during the crossfade?

    [edit]: ah, nevermind. Only the element that appears as the result of the crossfade would be clicked.

    Then again, what would you specify if javascript were disabled?
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  10. #10
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    If javascript is disabled, you just have one button with no fancy effects (or just one image). If JavaScript is enabled, it creates the second button, adds the second image and adds the event listeners for the crossfade effect.

    Progressive enhancement!


Bookmarks

Posting Permissions

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