jquery - jQuery のスライド イン/アウト トグル

Question

jQueryを使用してスライドアウトdivを作成しようとしています。写真にカーソルを合わせると、div がスライドして表示され、写真が部分的に覆われます (情報が含まれています)。

Javascriptをまとめましたが、うまく動作しないようです。

情報はありdisplay:noneますが、画像がホバーされたときに表示されるはずです（右からスライドする必要があります）

http://jsfiddle.net/aHRzv/

Answer 1

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 フィドルのデモ。