이미지 위에 마우스를 올리면 다른 마우스를 가져 가면 애니메이션을 실행할 수 있습니다.

Question

그래서이 프로젝트는 학교에서 할 수 있으며 부분적으로는 Reveal image underneath a mask css/javascript에서 내 답을 얻었습니다.

내가 유리 위에 마우스를 올려 놓으면 색이 움직이지 않아요. 그 대신에, 내가 유리의 측면에 나열된 서로 다른 색의 작은 축소판을 5 개 가지고 있다면, 그 각각을 가리키면 유리에서 움직이는 색이됩니다. 그게 가능하니? 누군가 나를 기쁘게 도와 줄까요?

대단히 감사합니다!

Answer 1

기본적으로 물 "애니메이션"인 div의 색상을 변경해야합니다. 어떤 디스플레이 개체의 이벤트에 첨부 된 $("div").css("background-color", color);으로 쉽게 수행 할 수 있습니다 (귀하의 경우 작은 미리보기 이미지 5 개). 마틴 말했듯이 http://jsfiddle.net/MartinTale/Mz6VH/1/

Answer 2

, 당신은 단순히 당신이 유혹 무엇에 따라 배경 색상을 변경할 수 있습니다 : 여기

는 JSFiddle @ 작은 예이다. 그러나 다른 색상 위로 마우스를 가져 가면 (애니메이션이 끝나기 전에 색상이 전환됩니다) 약간 문제가 될 수 있습니다.

이 같은 일부 마크 업이있는 경우 : 당신이 당신의 기능에 jQuery를이 라인을 사용할 수 있습니다

<img src='http://www.videsignz.com/testing/images/water-front2.png' /> 
    <div id="blue-fill"></div> 
    <div id="red-fill"></div> 
    <div id="green-fill"></div> 

<div class="thumbnails"> 
    <div id="blue"></div> 
    <div id="red"></div> 
    <div id="green"></div> 
</div> 

그리고 이것은 기본적으로의 id를 잡아입니다

 var theFill = "#" + $(this).attr("id") + "-fill"; 

해당 요소를 얻을 수 현재 hovered 요소를 선택하고 채우기 선택기의 형식을 연결합니다.

그런 다음

$(theFill) 

를 사용하여 채우기를 선택하고 거기에서 애니메이션을 잡을 수 있습니다. 나는 클래스 속성과 스타일링을 위해 필요한 CSS로 codepen 예제를 만들었습니다. http://codepen.io/prythm/pen/Lwoyd