1

私は2つのjquery関数を持っています：

$(document).ready(function(){
        $("#title").click(function(){
            $("#click").delay(2700)
                    .css({opacity: 0.0, visibility: "visible"})
                        .animate({opacity: 0.5
                      });
                 });
             });

と

$(document).ready(function(){
    $("#click").hover(
        function () {
          $("#card12").animate({top:'220px'},100);}, 
        function () {
          $("#card12").animate({top:'330px'},100);
         });
    });


1.クリックすると（div id = #title）
2.（div id =＃click）が2700msの遅延で表示されます3.
カーソルを（div id =＃click）に向けると、（div id =＃card12）が上にスライドします

私の問題は次のとおり
です。1。2700ms前に誤って（div id =＃click）領域にカーソルを合わせました（（div id =＃click）が表示されるまでの遅延）
2。無視する代わりに、（div id =＃ card12）（div id =＃click）が完全にロードされるとすぐに、それに応答しました（上にスライドします）

。例：カーソルを（div id =＃click）領域に向け、カーソルを領域の外側に前後に移動します。 2700msの前に2回（前の遅延（div id =＃click）が表示されます）。

2つの最初のホバー（（div id =＃clickが表示される前））を無視する代わりに、jQueryは（div id =＃click "が完全にロードされるとすぐに（div id = "＃card12 "）を2回スライドします（ロードされるまでにカーソルが（div id =＃click））領域の外にある場合でも

私の質問は次のとおりです：
2700ms（表示される前の#click遅延）の前に起こったことを無視することは可能ですか？

PS：codePen/jsFiddleを使用してそれを実行できればもっと簡単だと思います。しかし、2つのjqueryを使用してcodePen / jsFiddleを使用する方法がわかりません-（ies？）

どうもありがとうございます

4

3 に答える 3

1

次のように、クリック関数内にホバーバインディングを追加することを検討してください。

$(document).ready(function(){
    $("#title").click(function(){
        $("#click").delay(2700)
            .css({opacity: 0.0, visibility: "visible"})
            .animate({opacity: 0.5})
            .hover(
                function () {
                    $("#card12").animate({top:'220px'},100);}, 
                function () {
                    $("#card12").animate({top:'330px'},100);
            });
        });
    });
});
于 2013-01-11T21:36:58.100 に答える
0

ホバーjQueryを最初のアニメーションjQueryのコールバックに入れます。

$(document).ready(function () {
  $("#title").click(function () {
    $("#click").delay(2700).css({opacity: 0.0,visibility: "visible"}).animate({
      opacity: 0.5}, function () {
      $("#click").hover(function () {
        $("#card12").animate({top: '220px'}, 100);
      },function () {
        $("#card12").animate({top: '330px'}, 100);
      });
    });
  });
});
于 2013-01-11T21:37:19.383 に答える
0

私が正しく理解していれば、遅延後に#click要素が表示されます。その場合にのみ、ユーザーがそれをクリックしてカード要素を表示できるようにする必要があります。簡単な修正の1つは、display：noneとvisibility：hiddenを使用することです。これはオプションである場合とそうでない場合があります。可視性の利点は、要素がそのスペースを維持することですが、それを回避する方法があります。display：noneを使用する場合はオプションではありませんが、次のようにすることで、達成したいことができると思います。

$(document).ready(function(){
    $("#title").click(function(){
        setTimeout(function(){
            $("#click").css({opacity: 0.0, visibility: "visible"}).animate({opacity:0.5});
            $("#click").hover(
                function () {
                    $("#card12").animate({top:'220px'},100);}, 
                function () {
                    $("#card12").animate({top:'330px'},100);
                }
            );
        },2700);
    });
});

コードが表示されませんが、＃click要素が#title要素の子であると仮定すると、上記のコードを使用しますが、正しい要素を取得するために#clickを$（this）.children（）タイプセレクターに変更します。ただし、クラスではなくセレクターとしてIDを使用しているように見えるため、ページには各要素が1つしかないことを前提としています。また、セレクターとしてIDを使用しても問題ありません。基本的に、私のコードは2700ミリ秒後にホバーイベントリスナーを割り当てます。これがsetTimeoutの目的です。

于 2013-01-11T21:38:37.203 に答える