0

画面上でアクションをコミットするjQueryコードがいくつかあります。ただし、イベントが終了するとすぐにアクションを繰り返すことはできません。コードに添付.live()してみ.on()ましたが、うまくいきませんでした。これが機能するためにセレクターにアタッチする必要があるイベントハンドラーに迷っています。コードは以下のとおりです。

$(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>
4

2 に答える 2

1

マウスが離れると、フォームがフェードアウトして非表示$(this).fadeOut(500);になり、マウスを再びその上に置く方法がなくなります。あなたはあなたがやろうとしていることを再考する必要があるでしょう。

オブジェクトがマウスイベントを受信するために、オブジェクトがdisplay: none後になってしまうものになることはできませんfadeOut()。

不透明度をゼロにアニメートして非表示にすることもできますが、ページ内のスペースは維持され、マウスイベントを取得できます。

$('#form1').hover(function() {
    $('#button1').show();
    $(this).animate({opacity: 1}, 500);
},
function() {
    $('#button1').hide();
    $(this).animate({opacity: 0}, 500);
});

また、ボタンの操作をに変更しました.hide()。.show()これは、実行中のショートカットであるためです。

于 2012-08-19T04:54:06.207 に答える
1

.fadeOut（）で要素を非表示にすると、要素自体がdisplay：noneであるため、ホバーイベントをトリガーできなくなり、要素がどこにあるかを魔法のように知ることができなくなります。

.fadeOutを使用する代わりに、.css（'opacity'、 '0'）を使用し、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;  
}​

jsfiddleの例を次に示します。http： //jsfiddle.net/F2taJ/

于 2012-08-19T04:54:45.270 に答える