Question

I have some jQuery code that commits an action on the screen. However as soon as the event ends I can not repeat the action. I tried attaching .live() and .on() onto the code but it did not work. I’m at a lost at what event handler I should attach to the selector in order for this to work. The code is below.

$(document).ready(function() {
 $('#form1').hover(function(){
    $('#button1').css("display", "block");
    $(this).fadeIn(500);
    },
   function(){
    $('#button1').css("display", "none");
    $(this).fadeOut(500);}     
    );


<form action="" id="form1" method="post">
<textarea id="inputbox1"  name="what_i_do"></textarea>
<input type="submit" id="button1" value="Edit">
</form>

Answer 1

Once you hide the element with .fadeOut(), the hover event cannot be triggered anymore, since the element itself is display:none, it cannot magically know where the element is supposed to be.

Instead of using .fadeOut, use .css(‘opacity’, ‘0’), and create the animation with css3.

Javascript:

$(document).ready(function() {
 $('#form1').hover(function(){
    $(this).css('opacity', '1');
    },
   function(){
    $(this).css('opacity', '0');
   });
});

CSS :

form {
   -webkit-transition: all 500ms ease-in-out;
   -moz-transition: all 500ms ease-in-out;  
   -o-transition: all 500ms ease-in-out;  
}​

Here is a jsfiddle example: http://jsfiddle.net/F2taJ/