Javascript:悬停时如何影响其他元素
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()
。是否看到悬停时转换背景图像/css的更改?用于渐变过渡解决方案。
此外,您可能需要一个新url的正确CSS声明:backgroundImage: "url(images/site1large.png)"
。但是,如果.animate()
工作的话,它可能会立即切换到新图像。
相关文章:
- 如何在不影响其他元素的情况下扩展DIV
- 是否可以使用Chart.js缩短雷达图上的外部标签,而不影响其他标签
- 在提交时影响其他文档
- 影响其他按钮的点击删除
- 如何在不影响其他按钮的情况下更改按钮
- 动态 Div 宽度影响其他 Div 宽度
- 异步加载的脚本是否会影响其他脚本的加载时间
- 动态更改对象的大小,而不会影响其他元素
- 此 JavaScript 代码是否也会通过禁用一个键来影响其他按键事件
- 影响其他变量的 Tumblr 喜欢按钮
- JQuery toggle() 方法不影响其他重复元素
- 如何在不影响其他项目的情况下操作一组列表组项目
- 如何在不影响其他值的情况下使jquery ui中的日期选择器禁用sunday
- 没有的震动效果;t影响其他元素
- Javascript:悬停时如何影响其他元素
- 当我们悬停任何东西时会影响其他元素
- 为什么空白警报语句会影响其他代码的执行
- 在不影响其他元素的情况下,用Vue.js切换一个元素的类开/关最简单的方法是什么?
- 为什么cheerio $变量不影响其他会话?
- 如何在不影响其他模态的情况下用CSS改变模态的宽度?