title: Jquery get the image element ID from a group of images in a div
body: <p>I've a simple issue, I cant find a way out. Im doing a small, simple slider/gallery
  1) "If click button 1, image one appears" 
  2) "If I click on button 2, IMAGE 1, slide left, and IMAGE 2 fades in"
  3) "If I click on any image, eg IMAGE 3, the current image slide left, new one fades in"</p>
  
  <p>My only issue is, how do I get the ID of the visible image, the one that is already showing. so that i can slide it, and fades in the image with respect to the button clicked.</p>
  
  <p>All the images are css "display none" by default and resides in the ".slider" div.</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class = "slider"&gt;
      &lt;img id="1" src = "img/img1.jpg" class = "pic" border = "0" /&gt;
      &lt;img id="2" src = "img/img2.jpg" class = "pic" border = "0" /&gt;
      &lt;img id="3" src = "img/img3.jpg" class = "pic" border = "0" /&gt;
  &lt;/div&gt;
  
  &lt;button type="button" class="btn" id="btn1"&gt;Btn 1&lt;/button&gt;
  &lt;button type="button" class="btn" id="btn2"&gt;Btn 2&lt;/button&gt;
  &lt;button type="button" class="btn" id="btn3"&gt;Btn 3&lt;/button&gt;
  &lt;/body&gt;
  
  
  
  &lt;style type = "text/css"&gt;
  
  .slider{
  width:400px;
  height:200px;
  overflow:hidden;
  margin:30px auto;
  }
  .slider img{
  width:400px;
  height:200px;
      display:none;
  }
  &lt;/style&gt;    
  
  &lt;script&gt;
  $(document).ready(function(){
  
      $(".btn").click(function() {
                      //alert($(".slider").children('.pic').attr('id'));
                      // or using (":visible:);
              )};
  )};
  &lt;/script&gt;
  </code></pre>