2011-05-27 49 views
1

失去焦點後如下下面的例子:添加IMG和setTimeout的從輸入

<tr> 
    <td width='75px' class='someClass'> 
     <input class='input' type='text' size='5'/> 
    </td> 
    <td width='75px'class='someClass'>some value</td> 
</tr> 

我有10行以上的代碼,所以這是簡單的:

當我從輸入失去焦點,我必須在輸入旁邊創建一個img,然後設置一個timeOut到img只是fadeOut。

回答

3

這裏是如何做到這一點的基本示例:

$('input.input').live('blur', function() { 
    var $this = $(this); 
    var $img = $('<img/>').attr('src', 'http://placekitten.com/70/70'); 
    $this.after($img); 
    setTimeout(function() { 
     $this.next('img').fadeOut('slow', function() { 
      $(this).remove(); 
     }); 
    }, 1000); 
}); 

演示:http://jsfiddle.net/fBfV4/1/

+0

完美(除了小貓)。 TY! – 2011-05-27 18:14:23

+0

@ric_bfa:不客氣,我想你應該把小貓留在那裏。 – 2011-05-27 18:15:32

+0

嘿,一個問題,如果我改變從一個輸入到另一個快速,他添加2 img的besid輸入..我能做什麼? – 2011-05-27 18:34:19

0
$('.input').mouseout(function() { 
    $(this).after('<img src="src.jpg" />'); 
    setTimeout(function() { 
     $(this).next('img').fadeOut('slow'), 1000); 
}); 

這將在輸入字段後追加一個圖像,然後在指定的時間間隔後開始淡出。

+0

對不起,-1,提問者談論焦點丟失,但你正在使用'mouseout'。此外,在傳遞給'setTimeout()'的回調中存在語法錯誤。請考慮改進你的答案。 – 2011-05-27 18:11:42

1

我......想我明白你是什麼之後。這應該接近:

$('td.someClass input').blur(function() { 
    var $this = $(this); 

    $this.parent().append('<img src="" />'); 

    setTimeout(function() { 
    $this.next('img').remove(); 
    }, 1500); 
});