滑入/滑出切換jQuery

Question

我想創建一個幻燈片div使用jQuery。當圖片懸停時，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 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。