CODEWITHSUNDEEP
jqueryhtmlcss
koool
koool

Reputation: 15517

Jquery menu not working

HI I have this jquery menu here

http://jsfiddle.net/pJMva/8/

and it doesnt seem to work ..... The button is supposed to expand to right on hover

Thanks all efforts appreciated

Upvotes: 3

Views: 240

Answers (2)

Sahal
Sahal

Reputation: 4136

This will work.

$(document).ready(function() {
  $('ul.anim_queue_example1 a')
    .hover(function() {
          $(this).animate({
              opacity: 0.25,
              left: '+=20',
              height: 'toggle'
          }, 5000, function() {
          // Animation complete.
          });
     }, function() {
          $(this).animate({
          opacity: 0.25,
          left: '+=0',
          height: 'toggle'
          }, 5000, function() {
             // Animation complete.
        });
    });

});

Check the working example here http://jsfiddle.net/pJMva/23/

Upvotes: 1

Niklas
Niklas

Reputation: 30002

Add position:relative; to your css:

.anim_queue_example1 a
{

    margin: 15px;
    width: 50%;
    height: 25px;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;

    text-decoration: none;

    font-size: 15px;
    font-weight: 700;

    background: #333;
    color: #fff;
    position:relative;

}

example: http://jsfiddle.net/niklasvh/pJMva/10/

Upvotes: 5

Related Questions