자바 스크립트 : 커서를 올리면 다른 요소에 어떻게 영향을 줍니까?

Question

좋아, 그럼 다음을 갖고 싶습니다 : 내가 요소를 가리키면 다른 요소가 애니메이션되어야합니다. 그러나 지금까지는 아무 소용이 없었습니다.

페이지 자바 스크립트/JQuery와는 : 나는 그렇게 가혹한를하지 마십시오 자바 스크립트/JQuery와에 비교적 새로운 해요

$("block").hover(function(){ 
    $(this).find("site").stop(true, false).fadeTo("slow", 0.2); 

    $(this).find("textOnImage").stop(true, false).animate({ 
     opacity: "1" 
    }, "slow"); 

    var id = jQuery(this).attr("id"); 
    if (id == "site1") { 
     $("siteLarge").animate({ 
      backgroundImage: "images/site1large.png" 
     }, "slow"); 
    } else if (id == "site2") { 
     $("siteLarge").animate({ 
      backgroundImage: "images/site2large.png" 
     }, "slow"); 
    } else if (id == "site3") { 
     $("siteLarge").stop(true, false).animate({ 
      backgroundImage: "images/site1large.png" 
     }, "slow"); 
    } 
}, function() {   
    $(this).find("site").stop(true, false).fadeTo("slow", 1); 
    $(this).find("textOnImage").stop(true, false).animate({ 
     opacity: "0" 
    }, "slow"); 
}); 

나는 경고 및 작품을 식별하는 소스를 테스트했습니다. 그러나 'siteLarge'는 이것의 영향을받지 않습니다.

HTML :

<div id="centerBlock"> 
     <block id="site1"> 
      <site style="position: absolute; margin-left: 10px; margin-top: 10px; border: 1px solid black;"> 
       <img src="./images/site1.png" alt="some_text"/> 
      </site> 
      <textOnImage style="position: absolute; margin-left: 10px; margin-top: 10px;"> 
       Mijn eerste site. Best wel leeg, maar een leuk begin. Een combinatie van html en css. 
      </textOnImage> 
     </block> 

     <block id="site2"> 
      <site style="position: absolute; margin-left: 10px; margin-top: 163px; border: 1px solid white;"> 
       <img src="./images/site2.png" alt="some_text"/> 
      </site> 
      <textOnImage style="position: absolute; margin-left: 10px; margin-top: 163px;"> 
       Mijn tweede site. Een hele grote vooruitgang ten opzichte van mijn eerste site! Hier wordt interactieve css toegepast. 
      </textOnImage> 
     </block> 

     <block id="site3"> 
      <site style="position: absolute; margin-left: 10px; margin-top: 316px; border: 1px solid black;"> 
       <img src="./images/site3.png" alt="some_text"/> 
      </site> 
      <textOnImage style="position: absolute; margin-left: 10px; margin-top: 316px;"> 
       Toekomstige plannen: <br> php, msql, ajax. 
      </textOnImage> 
     </block> 

     <large> 
      <siteLarge style="position: absolute; margin-left: 250px; margin-top: 10px;"> 
      </siteLarge> 
     </large> 

    </div> 

Answer 1

다른 하나 개의 배경 이미지에서 페이드 전환을 찾고 있다면, 당신은 .animate() 함께 할 수 없습니다. 페이드 전환 솔루션은 transition background-image/css change on hover?을 참조하십시오.

또한 새 URL에 대한 CSS 선언이 적절해야합니다 (backgroundImage: "url(images/site1large.png)"). 그러나 .animate()은 전혀 작동하지 않으면 즉시 새 이미지로 전환됩니다.