javascript - Displaying HTML elements on an image with the fade-in and the fade-out effects -

i'm displaying 2 buttons , checkbox on image can seen in following

these buttons , checkbox shown when mouse pointer positioned on image. disappear when mouse pointer moved away.

this effect achieved following simple jquery code.

jquery(function(){     jquery(".the-buttons").hide();      jquery('.show-image').hover(function(){         jquery(this).find('.the-buttons').fadein(600);     },function(){         jquery(this).find('.the-buttons').fadeout(300);     }); }); 

the associated html/css follows.

<span class="show-image" style="position: relative;float:left;margin:5px;">                             <a href="../product_images/large/3562298873030291049_winter.jpg">         <img src="../product_images/medium/3562298873030291049_winter.jpg" alt="the image not available"/>     </a>      <input type="button" class="the-buttons" name="btnedit" value="" style="background-image:url(../css/layout/site/tables/action2.gif);height: 12px; width: 14px; border: none; cursor: pointer; background-color: transparent;position:absolute;top:0;left:0;" title="click edit image." />                             <input type="checkbox" class="the-buttons" id="chk" name="chk" title="check mark multiple deletion @ once." style="position:absolute;bottom:0;right:0;" value="662"/>     <input type="submit" class="the-buttons" name="btndeletesingle" value="" style="background-image:url(../css/layout/site/tables/action4.gif);height: 12px; width: 14px; border: none; cursor: pointer; background-color: transparent; text-align:right;position:absolute;top:0;right:0;" title="click delete image." /> </span> 

the static css stype buttons , checkbox unrelated. css classes show-image given <span> tag, the-buttons given buttons , checkbox interacting jquery code gives effect.

---

i have 1 additional requirement. when given checkbox on bottom-right corner of image checked/selected, should displayed permanently ignoring fade-in , fade-out effects. 2 other buttons displayed on image should have effect (when checkbox unchecked again, should have effect meant). have tried someway didn't succeed. possible somehow?

when it's checked, give class defined this:

.always-visible {     display: inline !important; } 

and use code:

$("#chk").on("click", function () {     var $this = $(this);     if ($this.is(":checked")) {         $this.addclass("always-visible");     } else {         $this.removeclass("always-visible");     } }); 

(of course, replace $ jquery if necessary)

now think might necessary use code fading:

jquery(this).find('.the-buttons').not('.always-visible').fadein(600); // , jquery(this).find('.the-buttons').not('.always-visible').fadeout(300);