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：如何在徘徊时影响其他元素？

回答

相关问题