Форум

VladLes22 · #1 (**permalink**) 25.01.2014, 17:52

Доброго времени суток. Возник такой вопрос: Нужно чтобы при наведении на блок (slidebox) курсором, появлялся(через opacity) другой блок (h2)вложенный в первоначальный, ну и естественно когда курсора на данном блоке нет то заголовок (opacity:0).

<div class="slideBox">
			<a href="#"><img src="../images/1.png"></img></a>
			<h2 class="title">Заголовок</h2>
			<div class="slideup">
				<div class="description">
				Под катом
				</div>
			</div>
		</div>

В чем допускаю ошибку ?

<script type="text/javascript">
$(document).ready(function() { if ($('.slideBox').hover(function())) {
              $('.title').hover(function() {
                $(this).stop().animate({
                   opacity: 1
                 }, 0);
                    }
					}
					else  function() {
               $(this).stop().animate({
                opacity: 0
                 }, 200);
              });
            });
</script>

Прошу помочь)))
ЗЫ. Через css не предлагать, не работает))

рони · #2 (**permalink**) 25.01.2014, 18:08

VladLes22,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
.title, .slideup{
   opacity: 0;
}

  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">
$(document).ready(function() {


$('.slideBox').hover(function() {
              $('.title, .slideup', this).stop().animate({
                   opacity: 1
                 }, 1000);

                    },
                  function() {
              $('.title, .slideup', this).stop().animate({
                   opacity: 0
                 }, 1000);

                    })
              });

</script>

</head>

<body>
<div class="slideBox">
			<a href="#"><img src="../images/1.png"></img></a>
			<h2 class="title">Заголовок</h2>
			<div class="slideup">
				<div class="description">
				Под катом
				</div>
			</div>
		</div>

</body>

</html>

VladLes22 · #3 (**permalink**) 25.01.2014, 18:14

Так, а если мне надо чтобы slidbox всегда был с opacity:1 ?

VladLes22 · #4 (**permalink**) 25.01.2014, 18:20

Код вставил к сожалению не работает, чуток не понимаю почему в коде нету if и else ??

ruslan_mart · #5 (**permalink**) 25.01.2014, 18:25

Сообщение от VladLes22

ЗЫ. Через css не предлагать, не работает))

Всё заработает, если сделать правильно.

VladLes22 · #6 (**permalink**) 25.01.2014, 18:31

Ну если в css можно организовать что то типо if slidebox:hover, h2.title: active {opacity:0;} и не применяю opacity к slidebox то да было бы круто)

рони · #7 (**permalink**) 25.01.2014, 19:15

Сообщение от VladLes22

Так, а если мне надо чтобы slidbox всегда был с opacity:1 ?

у slidbox opacity никак не изменяется в коде

Сообщение от VladLes22

Код вставил к сожалению не работает, чуток не понимаю почему в коде нету if и else ??

а зачем if и ваш пример неработающий где?

VladLes22 · #8 (**permalink**) 25.01.2014, 19:24

так сам пример не работает на странице сайта, про if уже понял, если вставляю ваш код javascript то при наведении курсора на блок (slideblox) ничего не происходит а выполняется только css

VladLes22 · #9 (**permalink**) 25.01.2014, 19:26

И не совсем понятно почему вы затронули slideup он работает по css

рони · #10 (**permalink**) 25.01.2014, 19:50

VladLes22,

Форум

Справочник

Discord чат

Курсы javascript