Question

我正在使用此网站上的代码：http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/

我的问题是我将鼠标移开并且图像向上滑动，当我将鼠标移开时它不会向下滑动。它应该向下滑动。有谁知道我的错误在哪里？

我的Jquery在脚本文件中引用：

$(document).ready(function () {
    $('.boxgrid.slidedown').hover(
        function () {
            $(".cover", this).stop().animate({ top: '-350px' }, { queue: false, duration: 300 });
    }, function () {
        $(".cover", this).stop().animate({ top: '0px' }, { queue: false, duration: 300 });
    })
});

这是我的HTML：

<div class="boxgrid slidedown"><img class="cover" src="http://localhost:60273/www.cooklikecarolyn.com/pics/food-gallery/snowball-cookies.png" alt="" />
<h3>The Nonsense Society</h3>
<p>Art, Music, Word<br /><a href="http://www.nonsensesociety.com" target="_BLANK">Website</a></p>
</div>

这是我的CSS：

.boxgrid{
    width: 500px;
    height: 350px;
    margin:10px;
    float:left;
    background:#161613;
    border: solid 2px #8399AF;
    overflow: hidden;
    position: relative;
    border: 1px solid blue;
    cursor: pointer;
}
.boxgrid img{
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
}

.boxcaption{
    float: left;
    position: absolute;
    background: #000;
    height: 100px;
    width: 100%;
    opacity: .8;
    /* For IE 5-7 */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    /* For IE 8 */
    -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    border: 1px solid red;
    }

 .captionfull .boxcaption 
 {
    margin-top: 350px;
    top: 350;
    left: 0;
 }
 .caption .boxcaption 
 {
    margin-top: 350px;
    top: 310;
    left: 0;
 }

Answer 1

给它一个机会。我使用了mouseenter和mouse leave以及添加了缺失的半结肠

$(document).ready(function () {
    $('.boxgrid.slidedown').mouseenter(
        function () {
            $(".cover", this).stop().animate({ top: '-350px' }, { queue: false, duration: 300 });
    }).mouseleave(
         function () {
            $(".cover", this).stop().animate({ top: '0px' }, { queue: false, duration: 300 });
    });
});

带有字幕的Jquery滑动盒

1 个答案: