0

複数の画像があります。各画像にマウスオーバーすると別の画像に変わり、マウスアウトすると前の画像に戻ります。問題は、このプロセスをすべての画像で迅速に実行すると、各画像はホバー画像にそのまま残りますが、前の画像には戻らないことです。しかし、ゆっくりとこれを行うと、効果と機能が正しく機能します。次のコード スニペットは、2 つの画像に対してのみ提供しています。これから私を助けてください。私の下手な英語で申し訳ありません。

HTML 部分

<div style="float:left;">
   <a class="dialog-link" href="#" >
        <img src="images/twitter.png" width="126" height="78" border="0" class="twitter_h"/>     
   </a>
</div>

<div style="float:left; margin-left:83px;">
<a class="dialog-link" href="#" target="_blank">
<img src="images/linkedin.png" width="232" height="78" border="0" class="linkedin_h"/></a>
</div>

Jクエリ部分

<script>
$(function(){

    var link_open=false;
    var openGif_t = $(".twitter_h").attr("src");    
    var closedGif_t = openGif_t.replace("twitter.png", "follow1.png");

    var openGif_l = $(".linkedin_h").attr("src");   
    var closedGif_l = openGif_l.replace("linkedin.png", "connect1.png");

$(".twitter_h")
   .mouseenter(function() {
    $(this).fadeOut(function(){
           $(this).attr("src", closedGif_t);
           $(this).fadeIn(150);
       });
   })
   .mouseleave(function() {
    $(this).fadeOut(function(){
           $(this).attr("src", openGif_t);
           $(this).fadeIn(150);
       });
   });


$(".linkedin_h")
   .mouseenter(function() {
       //alert(closedGif)
       $(this).fadeOut(function(){
           $(this).attr("src", closedGif_l);
           $(this).fadeIn(150);
       });
   })
   .mouseleave(function() {
      // alert($(this).attr("src"));
       $(this).fadeOut(function(){
           $(this).attr("src", openGif_l);
           $(this).fadeIn(150);
       });
   });

});
4

4 に答える 4

1

hover() メソッドは、選択した要素の上にマウス ポインターを置いたときに実行する 2 つの関数を指定します。

このメソッドは、mouseenter イベントと mouseleave イベントの両方をトリガーします。

 $(function(){

        var link_open=false;
        var openGif_t = $(".twitter_h").attr("src");    
        var closedGif_t = openGif_t.replace("twitter.png", "follow1.png");

        var openGif_l = $(".linkedin_h").attr("src");   
        var closedGif_l = openGif_l.replace("linkedin.png", "connect1.png");

    $(".twitter_h").hover(function() {
        $(this).fadeOut(function(){
               $(this).attr("src", closedGif_t);
               $(this).fadeIn(150);
           });
       },
       function() {
        $(this).fadeOut(function(){
               $(this).attr("src", openGif_t);
               $(this).fadeIn(150);
           });
       });


    $(".linkedin_h").hover(function() {
           //alert(closedGif)
           $(this).fadeOut(function(){
               $(this).attr("src", closedGif_l);
               $(this).fadeIn(150);
           });
       },
       function() {
          // alert($(this).attr("src"));
           $(this).fadeOut(function(){
               $(this).attr("src", openGif_l);
               $(this).fadeIn(150);
           });
       });

    });
于 2012-12-31T11:23:44.503 に答える
0

上記のコメントで述べたように.stop()、当面の問題を修正する必要があると思います。

コードをコンパクトに保つ​​ために、次の行に沿って整理することを検討してください。

$(function() {
    var srcArr = [
        {jq: $(".twitter_h"),  over: "twitter.png",  out: "follow1.png"},
        {jq: $(".linkedin_h"), over: "linkedin.png", out: "connect1.png"}
        //additional lines here
    ];

    $.each(srcArr, function(i, srcObj) {
        obj.mouseover = srcObj.jq.attr("src");
        obj.mouseout = srcObj.mouseover.replace(srcObj.over, srcObj.out);
        obj.jq.on('mouseenter mouseleave', function(e) {
            var $this = $(this).stop().fadeOut(function() {
                $this.attr("src", obj[e.type]);
                $this.fadeIn(150);
            });
        });
    }
});

テストされていない

追加の画像を処理するには、配列に行を追加するだけsrcArrです。

于 2013-01-01T07:32:49.557 に答える
0

同じ動作のIMHOの画像がたくさんある場合、コードが多すぎて、やるべきことが多すぎます。jquery を使用してクラスを変更する場合は、CSS トランジションとフラットな JavaScript を使用してみてください。$(...).toggleClass(...) を使用します。

于 2012-12-31T14:00:00.313 に答える
0

便利なメソッド を使用して、マウスの開始イベントとマウスの終了イベントをバインドできますhover()。

簡単な例を次に示します。

$(".twitter_h").hover(

function() {
    console.log("mouseEnter");
    $(this).stop().fadeOut(function() {
        $(this).attr("src", closedGif_t).fadeIn(150);
    });

}, function() {
    console.log("mouseLeave");
    $(this).stop().fadeOut(function() {
        $(this).attr("src", openGif_t).fadeIn(150);
    });
});​
于 2012-12-31T11:14:11.470 に答える