画像を置き換えるときにテキストがちらつく

Question

画像の上を浮遊するときに画像上で見えるようになるテキストの変化は、画像とテキストを1つのdivに入れる前に滑らかでした。私は画像の上にテキストを配置できるように、画像とテキストを1つのdivに入れました。移行は今や不安定です - これをどのように修正できるかご存知ですか？ありがとうございました。

$(document).ready(function() { 
 

 
    $("img").hover(function() { 
 

 
     $("img").stop().animate({ 
 
     "opacity": "0" 
 
     }, "slow"); 
 
     $(".text").css("visibility", "visible"); 
 
    }, 
 
    function() { 
 
     $("img").stop().animate({ 
 
     "opacity": "1" 
 
     }, "slow"); 
 
     $(".text").css("visibility", "hidden"); 
 

 
    }); 
 

 
});

#image { 
 
    display: block; 
 
    margin: 0 auto; 
 
    height: 35%; 
 
    width: 35%; 
 
    padding-left: 5%; 
 
    overflow: hidden; 
 
} 
 

 
#imageblock { 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.text { 
 
    color: #000000; 
 
    text-align: center; 
 
    font-family: "Raleway"; 
 
    font-size: 90%; 
 
    visibility: hidden; 
 
    position: absolute; 
 
    padding: 3%; 
 
    width: 100%; 
 
    bottom: 30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="imageblock"> 
 
    <img id="image" src="http://2016.igem.org/wiki/images/8/81/T--Sydney_Australia--Peek_Banner.png"> 
 
    <div class="text"> 
 
    <h5>NBB4 ethylene</h5> 
 
    </div> 
 
</div>

Answer 1

バインド代わりに、画像の#imageblockにホバーイベント：

$(document).ready(function() { 
 
    $("#imageblock").hover(function() { 
 
    console.log("enter"); 
 
    $("img").stop().animate({"opacity": "0"}, "slow"); 
 
    $(".text").css("visibility", "visible"); 
 
    }, function() { 
 
    console.log("leave"); 
 
    $("img").stop().animate({"opacity": "1"}, "slow"); 
 
    $(".text").css("visibility", "hidden"); 
 
    }); 
 
});

#image { 
 
    display: block; 
 
    margin: 0 auto; 
 
    height: 35%; 
 
    width: 35%; 
 
    padding-left: 5%; 
 
    overflow: hidden; 
 
} 
 

 
#imageblock { 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.text { 
 
    color: #000000; 
 
    text-align: center; 
 
    font-family: "Raleway"; 
 
    font-size: 90%; 
 
    visibility: hidden; 
 
    position: absolute; 
 
    padding: 3%; 
 
    width: 100%; 
 
    bottom: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="imageblock"> 
 
    <img id="image" src="http://2016.igem.org/wiki/images/8/81/T--Sydney_Australia--Peek_Banner.png"> 
 
    <div class="text"> 
 
    <h5>NBB4 ethylene</h5> 
 
    </div> 
 
</div>

だから何が起こったのか？ホバーイベントをイメージにバインドしました。イメージの一部を覆っている目に見えないテキストブロックがあります。真ん中のどこかにイメージを置くと、ホバーイベントが発生し、テキストが表示されます。テキストがイメージを覆い、イメージがもう表示されなくなり、2番目のイベントハンドラがトリガされ、テキストが見えなくなります。イメージが再び宙に浮かび、あなたはちらつきがあります！画像の端、つまりテキストで覆われていない領域にマウスを重ねると、ちらつきがないことに注意してください。