鼠标悬停时 li 类图像交换和 jQuery 幻灯片的问题

Question

抱歉，如果这具有误导性，我在 Java 脚本和 jQuery 方面还很陌生。谁能告诉我如何使导航链接在鼠标悬停时向左滑动并在鼠标悬停时滑回？我试图在鼠标悬停时单独滑动的 li 类用于此gallery image swap 脚本。我有一个带有图像的左侧导航平面，这些图像将在悬停时将相应的图像更改为右侧。

<script type>
$(document).ready(function() {
    // Image swap on hover
    $("#gallery ul li img").hover(function(){
      $('#main-img').attr('src',$(this).attr('src').replace('thumb/',    
      '')).stop().hide().fadeTo("slow",1);
    });
    // Image preload
    var imgSwap = [];
     $("#gallery ul li img").each(function(){
        imgUrl = this.src.replace('thumb/', '');
        imgSwap.push(imgUrl);
    });
    $(imgSwap).preload();
});
$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}
</script>

$("#gallery ul li img").hover(function(){ 中包含的 li 类是我想要在鼠标悬停时单独滑动并在鼠标悬停时返回的内容。我试过了

$("##gallery ul li img").hover(function(){
   $("gallery ul.home", this).stop().animate({left:"150px"},{queue:false,duration:200});
}, function() {
   $("gallery ul.home", this).stop().animate({right:"0px"},{queue:false,duration:200});

但这似乎打破了.hover(function(){

HTML：

<div id="gallery">
<img src="images/gallery/home.png" alt="" id="main-img" />
  <ul>
   <li class="home"><img src="images/gallery/thumb/home.png" alt="" /></li>
   <li class="about"><img src="images/gallery/thumb/About Us.png" alt="" /></li>
   <li class="contact"><img src="images/gallery/thumb/Contact Us.png" alt="" /></li>
   <li class="services"><img src="images/gallery/thumb/Services.png" alt="" /></li>
  </ul>
</div> 

CSS：

#body #left_nav #gallery #main-img {
    position: absolute;
    left: 400px;
    top: 20px;
    right: auto;
    bottom: auto;
}
#body #left_nav #links #gallery ul li{
    display: inline;
    clip: rect(auto,3px,auto,auto);
    height: 500px;
    width: 300px;
}
#body #left_nav #gallery ul .home {
    position: absolute;
    left: 117px;
    top: 74px;
    list-style-image: none;
    list-style-type: none;
}
#body #left_nav #gallery ul .about {
    position: absolute;
    left: 88px;
    top: 176px;
    list-style-image: none;
    list-style-type: none;
}
#body #left_nav #gallery ul .contact {
    position: absolute;
    left: 80px;
    top: 277px;
    list-style-image: none;
    list-style-type: none;
}
#body #left_nav #gallery ul .services {
    position: absolute;
    top: 385px;
    list-style-image: none;
    list-style-type: none;
    left: 98px;
}

Answer 1

将其用于悬停：

$("#gallery ul li img").hover(function(){
      $('#main-img').attr('src',$(this).attr('src').replace('thumb/',''))
          .stop()
          .show("slide");
    },function(){
      $('#main-img').stop().hide("slide");
});

还要确保您的页面上有 jquery ui 脚本，否则这将不起作用。

并且您的预加载需要：

$.fn.preload = function() {
    this.each(function(index) {
        $('<img/>')[0].src = this[index];
    });
};

编辑我想给你一些简单的阅读：http://docs.jquery.com/UI/Effects/Slide

编辑 2： http://jsfiddle.net/kFBby/5/ jsFiddle 添加动画。