Question

我有800x500的图像。底部的两个象限对我想要淡入的图形进行了编辑。

如果整个图像由 AB CD

C＆amp; C＆amp; D是10秒后将被覆盖的两个图像，适合底部象限。我开始使用display：none;我认为fadein（）负责这件事，但我搞砸了。

小提琴是here我使用了不同的图像，但尺寸是正确的。

的style.css

*{
    margin:0;
    padding:0;
    background-color: #000;
}

#container {
    position: absolute;
    bottom: 0px;
    top: 0px;
    display:inline;             
}

.bottom-left {
    position:absolute;  
    top:250px;
    left: 0px;
    display: none;
}

.bottom-right {
    position:absolute; 
    top:250px;
    left:400px; 
    display: inline;

}

页面：

<!DOCTYPE html>
<html>
<head>

<!-- STYLE SHEETS -->
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>

<!-- JQuery * QTip Plugin at the bottom --> 
        <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>


<script type="text/javascript">
    $(document).ready(function(){   
        $('#bottom-left').fadeIn(10000);
    });
</script>

</head>
<body>
<div id="container">

<image src="images/NoAlertFull.png">
        <span class="bottom-right">
                <image src="images/Alert-red.png">
        </span>
        <span class="bottom-left">
                <image src="images/Alert-yellow.png">
        </span>     
</div>

</body>
</html>

Answer 1

您要按ID而不是按类来解决范围：将选择器更改为

$('.bottom-left').fadeIn('slow');

Answer 2

左下角是你的班级名字。所以用一个点

 $('.bottom-left').fadeIn(1000);

以下是示例：http://jsfiddle.net/CwgyW/5/

http://api.jquery.com/class-selector/

如果您尝试使用id获取元素，请使用＃

Ex : $("#myDivId").fadeIn(3000);

如果您尝试使用类名获取元素，请使用点

Ex : $(".myCSSClassName").fadeIn(3000);

Answer 3

您使用ID选择器#bottom-left而不是类选择器.bottom-left。

另外，jsfiddle有自己的文档大纲，你不会粘贴整个页面，只是正文内容。

演示：http://jsfiddle.net/Guffa/CwgyW/6/

Answer 4

 $('#bottom-left').fadeIn(10000);

应该是

 $('.bottom-left').fadeIn(10000);

#用于按ID

进行选择

.用于按类选择

jquery淡入，图像覆盖图像

4 个答案: