Jquery shorter code

I am new to jquery and sti开发者_高级运维ll learning. The code I have right now works and it does what I want except it's too long and inefficient I was wondering if there is a way to make it shorter and more dynamic(planing to add more images in the future). There are 12 images each with unique id. I also use 12 divs that hold caption for each image.

<td>
    <a href="#0"><img src="images/disintegrator.jpg" id="img1"  height="139" border="0" /></a>
</td>

<div class="caption" id="cap1">Disintegrator</div>

Is there a way to make the code below shorter? There are 10 more block like that for the other images.

$("#img1").live("mouseover", function () {
    //timeout function
    timer = window.setTimeout(function () {
        $("#cap1").show('fast')
    }, 500);

    $('#img1').mouseout(function () {
        if (timer) {
            window.clearTimeout(timer);
        }
        $("#cap1").hide('fast')
    })
});
$("#img2").live("mouseover", function () {
    timer = window.setTimeout(function () {
        $("#cap2").show('fast')
    }, 500);
    $('#img2').mouseout(function () {
        if (timer) {
            window.clearTimeout(timer);
        }
        $("#cap2").hide('fast')
    })
});

---

You can do this:

<td>
    <a href="#0"><img src="images/disintegrator.jpg" id="img1" rel="cap1" height="139" border="0" /></a>
</td>

<div class="caption" id="cap1">Disintegrator</div>


$("img").live("mouseover", function(){
     var $e = $(this);
     timer = window.setTimeout(function() {
       $('#' + $e.attr('rel')).show('fast')
     }, 500);
});

$("img").live("mouseout", function(){
     var $e = $(this);
     if (timer) {
          window.clearTimeout(timer);
     }
     $('#' + $e.attr('rel')).hide('fast')
});

---

Consider using .delegate() instead of .live(). Here is the delegate man page

---

Add a common class to the image, say class=switchable for example

Then just iterate over each and add the event handlers

$.each( $(".switchable"), function(i, element){
  $(element).live("mouseover",function(){
  //timeout function
    timer = window.setTimeout(function() {
      $("#cap"+i).show('fast')
    }, 500);

    $(element).mouseout(function() {
      if (timer) {
        window.clearTimeout(timer);
      }
      $("#cap"+i).hide('fast')
    })
  });
});

---

you could just minify it. http://jscompress.com/

$("#img1").live("mouseover",function(){timer=window.setTimeout(function(){$("#cap1").show("fast")},500);$("#img1").mouseout(function(){if(timer){window.clearTimeout(timer)}$("#cap1").hide("fast")})});$("#img2").live("mouseover",function(){timer=window.setTimeout(function(){$("#cap2").show("fast")},500);$("#img2").mouseout(function(){if(timer){window.clearTimeout(timer)}$("#cap2").hide("fast")})})

There's always a drawback to making code smaller which usually results in increased complexity and less code readability making it harder for support/bug fixes in 6 months time. If you understand the code now it is fine - in 6 month when you are better at jquery / coding i would look at it again then.