Javascript：如何在徘徊時影響其他元素？

好吧，所以我想要有以下內容：當我將一個元素懸停時，另一個元素應該是動畫的。但迄今爲止，這一直無濟於事。我是相當新的JavaScript/jQuery的，所以請不要苛刻：對Javascript：如何在徘徊時影響其他元素？

的JavaScript/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>

來源

2012-02-09 Ridz

控制檯中的任何錯誤？看起來像一個奇怪的'\\'在你的一條生命線上。 – Jivings 2012-02-09 09:34:25

與這些選擇器有什麼關係？你有像''和''這樣的標籤嗎？ – JJJ 2012-02-09 09:37:05

@Jivings是我修復了這些，這些是複製粘貼錯誤。這些對於這個問題並不重要。 – Ridz 2012-02-09 09:38:05

如果你正在尋找從一個背景圖像其他淡入淡出過渡，你不能.animate()做到這一點。請參閱transition background-image/css change on hover?以瞭解淡入淡出的過渡解決方案。

此外，您可能需要一個適當的新網址的CSS聲明：backgroundImage: "url(images/site1large.png)"。但.animate()可能會立即切換到新的圖像，如果它工作。

來源

2012-02-09 09:47:43 JJJ

Javascript：如何在徘徊時影響其他元素？

回答

相關問題