Question

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

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

信息为display:none，但应显示图片悬停时（应从右侧滑出）

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

顺便说一下，这可以通过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 Fiddle demo

滑入/滑出jQuery的切换

1 个答案: