[英]Javascript: how to affect other element when hovering?
好的,所以我想要以下内容:当我将一个元素悬停时,另一个元素应该被动画化。 但是到目前为止,这一直没有用。 我对javascript / jquery还是比较陌生,所以请不要苛刻:p
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>
如果您正在寻找从一个背景图像到另一个背景图像的淡入淡出过渡,则无法使用.animate()
做到这.animate()
。 看到过渡背景图片/ css悬停时发生变化吗? 为淡入淡出过渡解决方案。
另外,您可能需要正确的CSS声明新的url: backgroundImage: "url(images/site1large.png)"
。 但是.animate()
可能会立即切换到新图像(如果它可以正常工作)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.