0

スクリプトに問題があります。

ID「web_click」のオブジェクトとID「web」の画像があります。画像「web」ソースの「web_click」をホバー（またはマウスオーバー）すると、「web.png」から「web_hover.png」（これらの画像の寸法は同じ）にフェード効果で置き換えられます。もちろん、「mouseout」または終了時に、ホバー ソースも非ホバー イメージに置き換え、フェードする必要があります。

しかし、このスクリプトは、「web_hover.png」にホバーするとフェードインして消え（両方の画像が表示されません）、「web_click」画像からカーソルを移動すると、フェード効果で「web.png」に戻り​​ます。ホーミングすると非表示になるのはなぜですか?

$(document).ready(function(){
$("#web_click").hover(function() {
$('#web').fadeOut();
    $("#web").attr ("src","png/two/web_hover.png");
        }, function() {
            $('#web').fadeIn();
    $("#web").attr ("src","png/two/web.png");
});

});

更新:私はこのメソッドを作成し、フェードは機能しますが、画像間の遅延です。最初の画像がフェード アウトします。ここで少し一時停止し、両方の画像が表示されず、2 番目の画像がフェード インします。

<script>
$(document).ready(function(){
    $("#web_click").mouseover(function() {
        $("#web").fadeOut('100', function(){
            $("#web").attr ("src","png/two/web_hover.png"); 
            $('#web').fadeIn('100');    
    });
    });
$("#web_click").mouseout(function() {
    $("#web").fadeOut('100', function(){
        $("#web").attr ("src","png/two/web.png");
        $('#web').fadeIn('100');
    });
});
});
</script>
4

1 に答える 1

0

これを試して

    <style type="text/css">
        img
        {
            position:absolute;
        }
    </style>
    <div id="web_click">
        <img src="png/two/web_hover.png" alt="Alternate Text" />
        <img style="display:none" src="png/two/web.png" alt="Alternate Text" />
    </div>

    <script type="text/javascript">
        $("#web_click").hover(function () {
            $('#web_click img').fadeToggle()
        }, function () {
            $('#web_click img').fadeToggle()
        });
    </script>

img のスタイルは、2 つの画像を同じ場所に配置するために使用されます。

于 2012-07-16T08:49:01.517 に答える