-1

For some reason I can' t seem to get .animate to function properly. Can anybody see why?

I'm using this a container div...

#valve-menu {
    position: absolute;
    width: 780px;
    top: 200px;
    background-color: #9C3;
    margin-right: 9px;
    margin-left: 10px;
}

then..

#control-cover{
    height: 50px;
    width: 180px;
    overflow: hidden;
    position: absolute;
    }
#control{
    background-color: #0C9;
    height: 200px;
    width: 180px;
    margin-right: 10px;
    position: absolute;
    }

My Jquery is this

$(document).ready(function(){

    //When mouse rolls over
    $("#control-cover").mouseover(function(){
        $(this).stop()
               .animate({height:'150px'},
                        {queue:false, duration:600, easing: 'easeOutBounce'})
    });

    //When mouse is removed
    $("#control-cover").mouseout(function(){
        $(this).stop()
               .animate({height:'50px'},
                        {queue:false, duration:600, easing: 'easeOutBounce'})
    });

});

I want to have the control div partially hidden and then onmouseover expand.

Richard Marskell - Drackir
  • 13,080
  • 3
  • 33
  • 54
Greg
  • 567
  • 2
  • 14
  • 31
  • when you say 'animate properly' what do you mean? What exactly is it DOING? Nothing? Or something erroneous? – Groovetrain Apr 15 '11 at 17:45
  • 1
    Hi Greg. Please make use of the code button ( Looks like this: {} ) when writing your question. Just highlight the piece of code and press the button. You can see what your post will look like below the text area as well. I've fixed the formatting in your post so you can have a look at the edit history to see what I changed. :) The better it's formatted, the easier it is to understand and the more likely people will be to read and answer your question. – Richard Marskell - Drackir Apr 15 '11 at 17:49
  • Not sure this is the problem, but it would probably help if you didn't try to load both jQuery 1.3 and jQuery 1.4 on the same page... check your favourite browser developer tools to look for JS errors on the page :) – contrebis Apr 15 '11 at 20:15

2 Answers2

3

This is working. If you're not using an Easing plugin there are only two available by default inside jQuery Swing and Linear: From jQuery website http://api.jquery.com/animate/

Easing

The remaining parameter of .animate() is a string naming an easing function to use. An easing function specifies the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear. More easing functions are available with the use of plug-ins, most notably the jQuery UI suite.

    $(document).ready(function(){

        //When mouse rolls over
        $("#control-cover").bind('mouseover mouseenter',function(){
            $(this).stop()
            .animate({height:'150px'},
            {queue:false, duration:600, easing: 'swing'})
        });

        //When mouse is removed
        $("#control-cover").bind('mouseout mouseleave',function(){
            $(this).stop().animate({height:'50px'},
            {queue:false, duration:600, easing: 'swing'})
        });

    });
msmafra
  • 1,704
  • 3
  • 21
  • 34
  • I'm using the jQuery CDN from Google, the latest version which is now 1.5.2 – msmafra Apr 15 '11 at 20:29
  • works like charm! Thanks! Do you know If can can implemnt this on 3 other divs? I would have put them all in a class but some of the divs are longer than others, so I need more revelaed on cetain divs than others. – Greg Apr 16 '11 at 00:54
  • I've tried to make using min-height, toggle (from animate()), altering the CSS, but it seams I'll have to learn some more about programing to get it done. :) – msmafra Apr 16 '11 at 12:27
0

The $('#control-over') selector in jQuery will search your html for an element that has an id of control-over, e.g. <div id="control-over">. From your code sample, it looks like you have a CSS class called control-over. The two are not the same.

You need to either add the id= attribute to your html element, or search for the element by class name, like $('.control-over').

odrm
  • 5,149
  • 1
  • 18
  • 13