CODEWITHSUNDEEP
javascriptjqueryjquery-ui
preahkumpii
preahkumpii

Reputation: 1301

jquery UI add/remove class duration not working

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.

Upvotes: 0

Views: 661

Answers (2)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

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");
});

Upvotes: 0

preahkumpii
preahkumpii

Reputation: 1301

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

Source: Trial and error.

Upvotes: 1

Related Questions