jquery - jQuery的滑入/滑出切换

Question

我正在尝试使用 jQuery 创建一个滑出 div。当图片悬停在上面时，应该会滑出一个 div，部分覆盖照片（其中包含信息）。

我已经把 Javascript 放在一起，但我似乎无法让它工作。

该信息是display:none但应该在图像悬停时显示（应该从右侧滑出）

http://jsfiddle.net/aHRzv/

Answer 1

这是一种方法：

$("#snoodLink").hover(
    function() {
        $('#snoodInfo').animate({
            left: 0,
            right: 0
        }, 500);
    }, function() {
        $('#snoodInfo').animate({
            left: '-100%',
            right: '100%'
        }, 500);
    });​

它使用以下 CSS：

.product {
    /* ensures the positioned text element isn't
       visible before sliding in/after sliding out */
    overflow: hidden;
}
#snoodInfo {
    position: absolute;
    top: 0;
    left: -100%;
    right: 100%;
    width: 100%;
    background-color: rgba(255,255,255, 0.5);
}​

JS 小提琴演示。

顺便说一句，这可以通过 CSS 来完成（旧版 IE 可以优雅地降级）：

.product {
    position: relative;
    overflow: hidden;
    /* following just center the image/element
       absolutely not necessary */
    width: 50%;
    margin: 1em auto;
}

.product img {
    width: 100%;
}
/* this is the #snoodInfo element, given a class
   insead of id, to make it more generic */
.info {
    position: absolute;
    top: 0;
    left: -100%;
    right: 100%;
    width: 100%;
    /* to enforce the fade-in/fade-out */
    color: transparent;
    background-color: transparent;
    /* trying to cover as many browsers
       as possible, omitting early/old IE
       but filters could (probably) be used */
    -webkit-transition: all 1.5s linear;
    -moz-transition: all 1.5s linear;
    -ms-transition: all 1.5s linear;
    -o-transition: all 1.5s linear;
    transition: all 1.5s linear;
}

.product:hover .info {
    left: 0%;
    right: 0%;
    color: #000;
    background-color: #fff;
    background-color: rgba(215,50,50,0.8);
    -webkit-transition: all 1.5s linear;
    -moz-transition: all 1.5s linear;
    -ms-transition: all 1.5s linear;
    -o-transition: all 1.5s linear;
    transition: all 1.5s linear;
}​

JS 小提琴演示。