Geek asks and answers

JQuery menu not working

HI I have this jquery menu here

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

and it doesn't seem to work ..... The button should expand to the right when you hover over

Thanks to everyone who appreciates

+3
source share
2 answers

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/

+5
source

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 out the working example here http://jsfiddle.net/pJMva/23/

+2
source

More articles:


All Articles