使用jquery触发图像淡入淡出的多个滚动列表项出现问题_Jquery_Fade_Rollover

使用jquery触发图像淡入淡出的多个滚动列表项出现问题

jquery

使用jquery触发图像淡入淡出的多个滚动列表项出现问题,jquery,fade,rollover,Jquery,Fade,Rollover,我正在尝试获取多个翻滚项目，这些项目会导致单个图像淡入其他几个潜在图像，具体取决于鼠标悬停或鼠标悬停事件当时触发的翻滚项目。我已经搜索了stackoverflow和无数其他教程网站，但由于某种原因，我根本找不到一个可行的方法。我花了一整天的时间试图让它发挥作用，现在我只是在开玩笑。任何帮助都将不胜感激我试图修改这个问题的答案：我主要只是将单击事件更改为悬停事件，然后为每个滚动列表项复制该函数： <script type="text/javascript" src="js/jquery-

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

我试图修改这个问题的答案：我主要只是将单击事件更改为悬停事件，然后为每个滚动列表项复制该函数：

<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>

据我所知，这段代码应该运行良好，但对#content div中的图像没有任何影响。我做错了什么？

jQuery

。stop

会帮你的

stop（）

停止动画

删除

页边距：-350px 0#菜单中选择code>，然后再试。
jQuery。停止将对您有所帮助
stop（）
停止动画
删除页边距：-350px 0从css中选择#菜单
，然后再试。
您的代码正在按需要工作，只是div在内容div后面，所以没有显示，所以删除#菜单css在我身边解决了它。感谢您的快速响应！实际上，它在负边距下运行良好。我意识到我也有一个id被意外地标记为类，这是它不起作用的主要原因。尽管我没有使用.stop（），但我还是会“检查”你的答案，因为我最终确实需要一些东西，可以在滚动效果后将用户带回原始图像
但类似。您的代码正在按需运行，只是div在内容div后面，所以没有显示，所以删除菜单css在我身边解决了它。感谢您的快速响应！实际上，它在负边距下运行良好。我意识到我也有一个id被意外地标记为类，这是它不起作用的主要原因。尽管我没有使用.stop（），但我还是会“检查”你的答案，因为我确实需要一些东西，可以在翻滚效果后将用户带回原始图像。
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;