Question

我目前正在创建一个网站，所有其他jquery功能都可以使用。但是，当我在html中添加一张图片时，它会弄乱这些功能并使它们变得不稳定。以下是html，css和js的片段。

HTML：

<section id="landing-page">
    <div class="center">
        <div id="image-background"></div>
        <div class="center-image">
            <img src="img/jasonbain-01.png"alt class="abs jasonbain">
        </div>
    </div>
</section>

的CSS：

#landing-page {
position: relative;
overflow: hidden;
background-color: #088da5;
height: 1280px;
width: 100%;
position: fixed;
    top: 700px;
}
.center-image {
position: relative;
top: -415px;
left: 275px;
height: 500px;
width: 800px;
}
.jasonbain {
height: 500px;
width: 800px;
position: relative;
top: -415px;
left: 275px;
height: 500px;
width: 800px;
}
#image-background {
height: 500px;
width: 500px;
background-color: white;
-moz-border-radius: 500px;
-webkit-border-radius: 500px;
border-radius: 500px;
position: relative;
top: 700px;
left: 425px;
box-shadow: 10px 10px 10px #003366;
}

js：

var main=function() {
    $("#landing-page").delay(5500).animate({"top": "0px"},200);
    $("#image-background").delay(5500).animate({"top": "70px"},100).animate({"top": "85px"},250).animate({"top": "80px"},300);
    $(".center-image").hide().delay(5700).fadeIn("slow");
}
$(document).ready(main);

Answer 1

如果您移除alt class="abs jasonbain"，它在fiddle上运行正常。即使包含无效的alt，它也能正常工作。您在图像上添加的类会搞乱这种效果。在小提琴页面上自己尝试一下。

<section id="landing-page">
    <div class="center">
        <div id="image-background"></div>
        <div class="center-image">
            <img src="http://lorempixel.com/400/200/"/>
        </div>
    </div>
</section>

JS

var main=function() {
    $("#landing-page").delay(5500).animate({"top": "0px"},200);
    $("#image-background").delay(5500).animate({"top": "70px"},100).animate({"top": "85px"},250).animate({"top": "80px"},300);
    $(".center-image").hide().delay(5700).fadeIn("slow");
}
main();

图像混淆了jQuery功能

1 个答案: