1

我正在尝试获取多个翻转项目，这些项目会导致单个图像淡入其他几个潜在图像，具体取决于当时由鼠标悬停或悬停事件触发的翻转项目。我已经搜索了 stackoverflow 和无数其他教程网站，但由于某种原因，我根本找不到一种可行的方法。我花了一整天的时间试图让它发挥作用，此时我只是把头发拉出来。任何帮助将不胜感激！

我试图修改这个 SO 问题的答案：Smooth image fade out, change src, and fade in with 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;

据我所知，这段代码应该可以正常运行，但 #content div 中的图像根本没有任何反应。我究竟做错了什么？

4

1 回答 1

1

jQuery.stop会帮助你。

stop()停止动画

margin: -350px 0 0;从 css 中删除#menu并尝试。

于 2013-02-18T08:27:16.447 回答