JQuery исчезают, изображение над изображением - PullRequest
Новая
       5

JQuery исчезают, изображение над изображением

0 голосов
/ 24 февраля 2012

У меня изображение 800x500.Два нижних квадранта имеют изменения в графике, которые я хочу добавить.

Если все изображение состоит из AB CD

C & D, это то, что будет скрыто через 10 секунд двумяизображения, которые помещаются в нижних квадрантах.Я начал с дисплея: нет;думая, что fadein () позаботится об этом, но я что-то напутал.

Скрипка здесь Я использовал разные изображения, но размеры правильные.

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>

Ответы [ 4 ]

1 голос
/ 24 февраля 2012 
 $('#bottom-left').fadeIn(10000);

должно быть 

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

# для выбора по идентификатору

. для выбора по классу

1 голос
/ 24 февраля 2012

внизу слева - ваше имя класса. так что используйте его с точкой 

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

Вот образец: http://jsfiddle.net/CwgyW/5/

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

Если вы пытаетесь получить элемент, используя идентификатор, используйте # 

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

Если вы пытаетесь получить элемент, используя имя класса, используйте точку 

Ex : $(".myCSSClassName").fadeIn(3000);
1 голос
/ 24 февраля 2012

Вы используете селектор идентификатора #bottom-left вместо селектора класса .bottom-left.

Кроме того, у jsfiddle есть свой собственный контур документа, вы не вставляете всю страницу целиком, только содержимое тела.

Демо: http://jsfiddle.net/Guffa/CwgyW/6/

1 голос
/ 24 февраля 2012

вы адресуете диапазон по идентификатору, а не по классу: измените селектор на 

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