Question

I am using following code for providing pop up title over image hover

<script type="text/javascript">
     var jq = $.noConflict();
     jq(document).ready(function(){
     jq(".package-images").mouseover(function(){
     jq(this).addClass("title-effect");
     jq(this).addClass("image-effect");
      jq(".package-images").mouseout(function(){
     jq(this).removeClass("title-effect");
      jq(this).removeClass("image-effect");
     });
    });
   });
  </script>

It works well, but how can I control the speed of these effects. Basically I want title effect to occur slowly.

Answer 1

If you want the change to be animated over the course of a second:

$(this).addClass("title-effect", 1000);

If you want the change to be delayed by a second:

$(this).delay(1000).addClass("title-effect");