1

その時点でマウスオーバーまたはホバーイベントによってトリガーされているロールオーバーアイテムに応じて、1つの画像が他のいくつかの潜在的な画像にフェードインする複数のロールオーバーアイテムを取得しようとしています。私はstackoverflowや他の無数のチュートリアルサイトを精査しましたが、何らかの理由でこれを行う方法を見つけることができませんでした。私はこれを機能させるために一日を費やしました、そしてこの時点でちょうど私の髪を引っ張っています。どんな助けでも大歓迎です！

このSOの質問に対する答えを変更しようとしました：画像のフェードアウトをスムーズにし、srcを変更し、jqueryでフェードインし ます。ほとんどの場合、クリックイベントをホバーイベントに変更し、ロールオーバーリストアイテムごとに関数を複製しました。

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#album01').hover(function() {
    $('#homeimg').fadeOut(500, function() {
        $(this).attr('src', 'photo01.jpg').bind('onreadystatechange load', function(){
            if (this.complete) $(this).fadeIn(500);
        });
    });
});
$('#album02').hover(function() {
    $('#homeimg').fadeOut(500, function() {
        $(this).attr('src', 'photo02.jpg').bind('onreadystatechange load', function(){
            if (this.complete) $(this).fadeIn(500);
        });
    });
});
$('#album03').hover(function() {
    $('#homeimg').fadeOut(500, function() {
        $(this).attr('src', 'photo03.jpg').bind('onreadystatechange load', function(){
            if (this.complete) $(this).fadeIn(500);
        });
    });
});
});
</script>
<body>
<div id="menu">
    <ul>
        <li id="album01"><a href="http://www.website.com/album01">album 3</a></li>
        <li id="album02"><a href="http://www.website.com/album02">album 2</a></li>
        <li id="album03"><a href="http://www.website.com/album03">album 2</a></li>
    </ul>
</div>
<div id="content">
    <img id="homeimg" src="images/home.jpg" alt="home"/>
</div>
</body>

また、スタイリングに何かが邪魔になっている場合に備えて、それも提供します。

a:link, a:active, a:visited {
display:block;
color: #000000;
text-decoration: none;
}
ul li a:hover {
display:block;
padding: 5px;
color: #FFFFFF;
background-color: #000000;
text-decoration: none;
}
#menu {
background: #FFFFFF;
width: 200px;
height 700px;
top: 50%;
padding: 0px 20px 450px 20px;
margin: -350px 0px 0px 0px;
overflow: auto;
position: fixed;
z-index: 2;
}
#content {
position: absolute;
height: 574px;
margin: -277px 0px 0px 0px;
padding: 0px 200px 0px 240px;
top: 50%;
overflow-x: hidden;
white-space: nowrap;

私が知る限り、このコードは正常に実行されるはずですが、＃contentdivの画像には何も起こりません。私は何が間違っているのですか？

4

1 に答える 1

1

jQuery.stopが役に立ちます。

stop()アニメーションを停止します

margin: -350px 0 0;cssから削除し#menuて試してください。

于 2013-02-18T08:27:16.447 に答える