Question

这在JQuery中应该很简单。我可以让它部分工作但不完全。

我需要的是<div>中的图像和另一个部分覆盖底部的图像。当我将鼠标悬停在图像上或部分覆盖图像时，部分覆盖的图像会向上滑动以完全覆盖第一个图像，而顶部图像则是指向另一个页面的链接等。当我鼠标滑出时，幻灯片会反转回原来的位置

对此有任何想法，我想考虑使用slide()和toggle()方法吗？

由于

杰米

Answer 1

您可以将hover()用于此

$(object).hover(
   function()
   {
      $(this).slideUp();
   },
   function()
   {
      $(this).slideDown();
   }
);

Answer 2

我在jsbin.com上创建了一个可以帮助你的例子。您可以查看来源以查看其工作原理，也可以单击右上角的链接来编辑源。

http://jsbin.com/ibero4/3

Answer 3

我相信toggle()会将功能绑定到click个事件，而非mouseover个事件，所以你不会想要这样。

jQueryUI中的

slide()听起来很合适，但你可以在jQuery核心中使用animate（jQueryUI是一个非常大的额外下载）。

Answer 4

感谢所有帮助人员。我最后使用了以下代码改编自nettuts.com上的教程：

 HTML:

    <li><span><img src="<1st.jpg" alt="about us" /></span><a href="about-us"><img src="1st.gif" class="move" alt="about us" /></a></li>
<li><span><img src="<2nd.jpg" alt="about us" /></span><a href="about-us"><img src="2nd.gif" class="move" alt="about us" /></a></li>
<li><span><img src="<3rd.jpg" alt="about us" /></span><a href="about-us"><img src="3rd.gif" class="move" alt="about us" /></a></li>
<li><span><img src="<4th.jpg" alt="about us" /></span><a href="about-us"><img src="4th.gif" class="move" alt="about us" /></a></li>

   CSS:

ul#slidenav {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    font-size: 1.1em;
}
ul#slidenav li{
    margin: 0;
    padding: 0;
    overflow: hidden;  /*--Important - Masking out the hover state by default--*/
    float: left;
    height:190px;

    display:inline-block;
}



#slidenav-container {
    margin-top: 40px;
}



ul#slidenav a, ul#slidenav span { 
    padding: 0px;
    float: left;
    text-decoration: none;
    clear: both;
    width: 100%;
    height: 131px;
    background-color:transparent;


}

jQuery:




    jQuery("#slidenav li").hover(function() {   //On hover...
                    jQuery(this).find(".move").stop().animate({
                        marginTop: "-131" //Find the <img> tag and move it up 131 pixels
                    }, 250);
                } , function() { //On hover out...
                    jQuery(this).find(".move").stop().animate({
                        marginTop: "0"  //Move the <img> back to its original state (0px)
                    }, 250);
                });

JQuery向上滑动

4 个答案: