jQuery에 대한 슬라이드 인/아웃 토글

Question

jQuery를 사용하여 div 밖으로 슬라이드를 만들려고합니다. 사진 위에 마우스를 올려 놓으면 div가 슬라이드 아웃하여 사진을 부분적으로 덮습니다 (정보가 포함 된 상태).

나는 자바 스크립트를 조합했지만 작동하지 않는 것 같습니다.

정보]는 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.

덧붙여, 이것은 (이전의 IE에 대한 우아한 저하) CSS와 함께 할 수있다 :

.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.