Grow your CSS skills. Land your dream job.

how to add speed to .css() in jquery

  • # November 25, 2011 at 8:45 pm

    Hey guys

    How can i make speed of change like “slow” working in

    $("id").hover(function(){
    .css({ "background":"url(.jpg)"},"slow")
    });

    I add it but not working …

    # November 25, 2011 at 9:44 pm

    You can’t set a time for the css function. If you want to animate something you’ll have to use animate or one of the other built in functions like fadeIn, fadeOut, fadeTo, hide, show, slideDown, etc.

    What exactly are you trying to do? It might be possible to use CSS3 transitions to animate something, depending on what it is.

    # November 26, 2011 at 4:00 am

    I want when i hover image , another image appear but by something like fading or animation when change

    # November 26, 2011 at 6:15 am

    This can be accomplished using the hover method. Nothing crazy going on here, when the user hovers over any div with a class of hover. I’m using a data attribute on each div to ‘store’ the next background. If there is no background, nothing will happen.

    I also made a visual for ye.

    http://jsfiddle.net/mattgoucher/6tpC4/6/

    Let me know if you need any further help.

    Matt.


    $(document).ready(function(){
    $('.hover').hover(
    function(){
    // On Mouse On
    var background = $(this).attr('data-background');
    if ( !background ) { return; }
    $(this)
    .css('background','url(' + background + ')')
    .children('img')
    .fadeOut('fast');
    },
    function(){
    // On Mouse Off
    $(this)
    .children('img')
    .fadeIn('fast');
    }
    );
    });
    # November 26, 2011 at 7:03 am

    thx for helping me , u are gr8

    can u explain this line plz as i am beginner in jQuery

     if ( !background ) { return; } 

    and can i use this for unorder list as i will use it for navbar buttons

    # November 26, 2011 at 7:15 am

    The concept can be used easily for any type of hover.

    As for the if statement, it would help if you read it out loud.

    if Not background, return.

    Which means, if the background variable does not exist (or is empty) the script will return false.

    Also, Like Mottie was saying above. If its for somthing like a navigation bar, you may be able to sneak past with a little css3 transition. Somthing like;


    #myID {
    -webkit-transition: background 1s ease-out;
    -moz-transition: background 1s ease-out;
    -o-transition: background 1s ease-out;
    transition: background 1s ease-out;
    }

    # December 1, 2011 at 9:50 pm

    For now, I prefer to CSS transitions.

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

You must be logged in to reply to this topic.

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