问jQuery的滑入/滑出切换

EN

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

.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);
}​

.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;
}​