1

これまでのところ、私は機能していますfadeInが、fadeOut完全には正しくありません。現在、マウスがホバー領域を離れるとすぐに、何fadeOutも起こっていないように見えます。fadeIn次のアニメーション (次の) が始まる前に完了し、キューに入れられないスムーズなフェードアウトが必要です。<span>基本的に、これはタグ内のいくつかのリンクです。今ホームストレッチ中です！

PS私は私が使用していないことを知ってい.hoverます。今のところmouseoverandに固執したいと思います。この小さな要求に応えてください。mouseleavemouseout

<script>
    $("a").mouseover(function () { 
        $("div").fadeIn(0, function () { 
            $("span").fadeIn(3000,0.0);
        }); 
        return false; 
    });  

    $dequeue;

    $("a").mouseleave(function () { 
        $("span").fadeOut(3000,0.0);
    });
</script>


<!DOCTYPE html>


<html>
<head>
<script type="text/javascript" src="jQuery.js"></script>
</head>
<body>

<a href="#">MouseOver!</a>

<div>

<h3><span>Sample Text</span></h3>

</div>
</body>
</html>

編集: 2011 年 8 月 18 日

上記のスクリプトと競合するスクリプトがある可能性があることに気付きました。同じページで追加の jquery スクリプトを実行しています。それ自体は正常に動作しますが、テキスト ボックス (上記) のスクリプトを追加すると、画像とテキストの両方の .fadeOut が無視されるか、少なくとも一貫性がなくなります。

2 番目の jQuery スクリプト:

<script>
$(document).ready(function(){

$(".latest_img").fadeTo("slow", 0.0);
$(".latest_img").hover(function(){
$(this).fadeTo(1000, 1.0).dequeue();

},function(){
$(this).fadeTo(1000, 0.0).dequeue();
});
});
</script>

以下は、テキストと画像の表示を促す 4 つの「ターゲット」のうちの 1 つの例です (4 つの画像に付随する 4 つのテキスト ボックスがあり、それぞれがターゲット上にマウスオーバーすると表示されます)。

HTML:

<div class="gallerycontainer">
<div width="100%" height="30%">

<a class="thumbnail" href="#thumb"><h2 class="ftb" id="tg1">Target A</h2>

<span class="txspan">
<img src="img/ima.jpg" class="latest_img" id="images" />
<h3 class="text"><br>Textbox content for Target A</h3></span></a>

</div>
</div>
4

4 に答える 4

1

sans$dequeue両方のイベントが機能しているようです

http://jsfiddle.net/pxfunc/y9qd6/

$("a").mouseover(function() {
    $("div").fadeIn(0, function() {
        $("span").fadeIn(3000, 0.0);
    });
    return false;
});

// remove $dequeue

$("a").mouseleave(function() {
    $("span").fadeOut(3000, 0.0);
});

編集：

http://jsfiddle.net/pxfunc/y9qd6/

var $a = $('a'),
    $div = $('div'),
    $span = $('span');

$a.mouseover(function() {
    $div.show();
    $span.fadeIn(1000);
}).mouseleave(function() {
    $span.stop(true, true).fadeOut(1000);
});

これはあなたが探しているように機能するはずです.spanフェードインする前に完全にフェードアウトします.

于 2011-08-18T03:03:30.517 に答える
0
  1. ドキュメント準備イベント内にすべてを配置します
  2. $dequeueを削除します。
  3. フェードインとフェードアウトの前にstop（true、true）を追加します

$(document).ready(function() {
  $("a").mouseover(function () { 
      $("div").stop(true, true).fadeIn(0, function () { 
          $("span").fadeIn(3000,0.0);
      }); 
      return false; 
  });  

  //$dequeue;

  $("a").mouseleave(function () { 
      $("span").stop(true, true).fadeOut(3000,0.0);
  });
});

于 2011-08-18T03:18:53.013 に答える
0

$dequeueは間違った構文です。$ .dequeueであり、要素、つまり$ .dequeue（elem）を渡す必要があります。また、キューステートメントを使用していないため、デキューは不適切です。stop（）は、両方のフェードで賢明です。stop（）のデフォルトに引数を渡す必要はありません。正常に機能するはずです。

于 2011-08-18T03:19:37.173 に答える
0

を使用する必要はありませんdequeue。stop()代わりに使用してください:

$("a").mouseover(function () { 
    $("div").fadeIn(0, function () { 
        $("span").fadeIn(3000,0.0);
    }); 
});  

// using ".stop()" will stop the previous animation, and immediatly fade it out

$("a").mouseleave(function () { 
    $("span").stop().fadeOut(3000,0.0);
});
于 2011-08-18T03:11:17.710 に答える