Grow your CSS skills. Land your dream job.

jQuery Animate function

  • # February 11, 2009 at 12:06 am

    So all I’m trying to do is fade the background of a black box to red on mouseover and back to black on mouseoff. I know how to do this, but it’s not working for some reason. However, if I tell it to change another attribute, it will do that, but the background color won’t change on hover.

    I’m using the jQuery plug-in scrollable (http://flowplayer.org/tools/scrollable.html) on a page that contains 4 divs. Scrollable automatically generates a tiny nav bar to scroll through the content based on the number of divs there are.

    Here is the css for the scrollable objects:

    Code:
    div.scrollable {
    position: relative;
    overflow: hidden;
    background: transparent;
    width: 775px;
    height: 400px;
    }

    #content {
    background: transparent;
    clear: both;
    position: absolute;
    width: 20000em;
    }

    #content div {
    float: left;
    width: 775px;
    height: 400px;
    background: transparent;
    color: #000000;
    }

    div.navi {
    height: 20px;
    margin-left: 78px;
    width: 200px;
    }

    div.navi a {
    background: #000000;
    cursor: pointer;
    float: left;
    height: 10px;
    margin: 3px;
    width: 10px;
    }

    This is my javascript:

    Code:
    $(function () {
    // initialize scrollable
    $(‘div.scrollable’).scrollable({
    size: 1,
    vertical: false,
    loop: false,
    interval: 0,
    clickable: true,
    speed: 1000,
    keyboard: true,
    items: ‘#content’,
    navi: ‘.navi’,
    naviItem: ‘a’,
    easing: ‘swing’
    });

    $(‘.navi a’).hover(function() {
    $(this).animate({“background” : “#9e2620″}, 1000);
    }, function() {
    $(this).animate({“background” : “#000000″}, 1000);
    });

    });

    I really don’t understand why the background color won’t change but if for instance I tell it to change the width, it will work fine. Anyone see something I don’t?

    # February 11, 2009 at 12:50 am

    Nevermind, jQuery doesn’t support animation of the background property.

    # February 11, 2009 at 1:53 pm

    It does though.. you just need the color plugin:

    http://plugins.jquery.com/files/jquery.color.js.txt

    pab
    # February 11, 2009 at 11:45 pm

    there is also a background plug in for background animation

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".