jquery UI add/remove class duration not working

Question

I am using Jquery UI with the addClass/removeClass function. It is changing the class, but without the duration. Here is my code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>    
<script src="jquery-ui-1.8.24.custom.min.js" type="text/javascript"></script>
<!--This has the Effects Core and all four boxes checked in the UI Core-->
<style type="text/css">    
.menu {
    height: 35px;
    padding: 15px 20px 5px 20px;
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 1.3em;
    font-weight: bold;
    display: inline;
    float: right;
    background: none;
}
.menu-hover {
    height: 35px;
    padding: 15px 20px 5px 20px;
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 1.3em;
    font-weight: bold;
    display: inline;
    float: right;
    background: url(../img/header-bg2.png) repeat-x;
}
</style>
<script>
  $(document).ready(function() {
    $('.menu').hover(function() {
      $(this).addClass("menu-hover", 1000);
    }, function() {
      $(this).removeClass("menu-hover", 1000);
    });
  });
</script>

<a href="#"><div class="menu">Contact</div></a>
<a href="#"><div class="menu">Services</div></a>
<a href="#"><div class="menu">About</div></a>
<a href="index.html"><div class="menu">Home</div></a>

I have double-checked to make sure that it is indeed changing the class, and it is. Any ideas how to get the duration to work? Thanks.

Why do you want to add a duration? If you really want a "duration", do you mean delay()? — Ian
– Ian, Commented Oct 18, 2012 at 3:36
There's no duration parameter in both addClass and removeClass methods. — Joseph
– Joseph, Commented Oct 18, 2012 at 3:37
This is jQuery UI, not plain jQuery. api.jqueryui.com/addClass — Barmar
– Barmar, Commented Oct 18, 2012 at 3:38
Don't listen to these guys... JqueryUI has a method override of jQuery's built in addClass — Brian Vanderbusch
– Brian Vanderbusch, Commented Oct 18, 2012 at 3:38

preahkumpii · Accepted Answer · 2012-10-18 04:05:42Z

1

Jquery UI will animate background colors, but not background images.

Source: Trial and error.

answered Oct 18, 2012 at 4:05

preahkumpii

1,3014 gold badges21 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matt Stone Over a year ago

Makes sense, how could you logically animate between binary image data?

Praveen Kumar Purushothaman · Accepted Answer · 2012-10-18 04:09:57Z

0

For the delay, you can use jQuery's delay():

$('.menu').hover(function() {
  $(this).delay(1000).addClass("menu-hover");
}, function() {
  $(this).delay(1000).removeClass("menu-hover");
});

edited Oct 18, 2012 at 4:09

answered Oct 18, 2012 at 3:49

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

3 Comments

Praveen Kumar Purushothaman Over a year ago

@BrianVanderbusch I don't get you!

Praveen Kumar Purushothaman Over a year ago

@preahkumpii What does it mean? Please update your question and give a comment here. :)

Praveen Kumar Purushothaman Over a year ago

OKay, @preahkumpii Please update it in the question. And I have given you a suggestion using delay(). Will that work for you?

Collectives™ on Stack Overflow

jquery UI add/remove class duration not working

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related