Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.02.2013, 04:15
Аспирант
Отправить личное сообщение для Гугл-мен Посмотреть профиль Найти все сообщения от Гугл-мен
 
Регистрация: 14.12.2010
Сообщений: 68

Скрытие одного блока и показать другой
Как сделать чтобы рпи наведении на блок див он плавно скрывался,а вместо этого скрытого показывался другой на его месте,отличный от него..например цветом..

или как при наведении поменять размеры дива блока а потом при следующем наведении он вернулся в исходные..то есть при наведении раскрылся при отведении курсора закрылся..
Ответить с цитированием
  #2 (permalink)  
Старый 26.02.2013, 08:11
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,973

Сообщение от Гугл-мен
рпи наведении на блок див он плавно скрывался,а вместо этого скрытого показывался другой на его месте
Реализация сильно зависит от размеров тех блоков... Одинаковая ли она... Фиксирована ли..
Ответить с цитированием
  #3 (permalink)  
Старый 26.02.2013, 08:12
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,973

Сообщение от Гугл-мен
как при наведении поменять размеры дива блока а потом при следующем наведении он вернулся в исходные..
Как вариант...
Хранить в атрибутах нужные размеры и менять размеры элемента при наведении.
Ответить с цитированием
  #4 (permalink)  
Старый 26.02.2013, 09:36
Аватар для Hekumok
Отправить личное сообщение для Hekumok Посмотреть профиль Найти все сообщения от Hekumok
 
Регистрация: 04.06.2012
Сообщений: 513

1)
<html><head>
<style>
.red {
width: 100px ;
height: 100px ;
background: red ;
display: block ;
}
.green {
width: 100px ;
height: 100px ;
background: green ;
display: none ;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$(".red").mouseover(function() {
$(this).slideUp() ;
$(".green").slideDown() ;
}) ;
$(".green").mouseout(function() {
$(this).slideUp() ;
$(".red").slideDown() ;
}) ;
}) ;
</script>
</head><body>
<div class="red"></div>
<div class="green"></div>
</body></html>

2)
<html><head>
<style>
div {
width: 100px ;
height: 100px ;
background: red ;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
var newWidth = "200px", oldWidth = "100px" ;
$("div").hover(function() {
$(this).stop().animate({width: newWidth}, "slow") ;
},
function() {
$(this).stop().animate({width: oldWidth}, "slow") ;
}) ;
}) ;
</script>
</head><body>
<div></div>
</body></html>
__________________
★ ²º¹³ ☆
Ответить с цитированием
  #5 (permalink)  
Старый 26.02.2013, 12:48
Аспирант
Отправить личное сообщение для Гугл-мен Посмотреть профиль Найти все сообщения от Гугл-мен
 
Регистрация: 14.12.2010
Сообщений: 68

Hekumok
ваще первый вариант в тему а как сделать так чтобы не снизу выезжало а сверху и например один блок был 100 пикселей а другой 80,а то если просто меняю ширину у блоков,то при наведении сьезжает почему-то((
Ответить с цитированием
  #6 (permalink)  
Старый 26.02.2013, 13:25
Аватар для Hekumok
Отправить личное сообщение для Hekumok Посмотреть профиль Найти все сообщения от Hekumok
 
Регистрация: 04.06.2012
Сообщений: 513

Сообщение от Гугл-мен
а как сделать так чтобы не снизу выезжало а сверху
Так?
<html><head>
<style>
.red {
width: 100px ;
height: 100px ;
background: red ;
display: block ;
}
.green {
width: 100px ;
height: 100px ;
background: green ;
display: none ;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$(".red").mouseover(function() {
$(this).slideUp() ;
$(".green").slideDown() ;
}) ;
$(".green").mouseout(function() {
$(this).slideUp() ;
$(".red").slideDown() ;
}) ;
}) ;
</script>
</head><body>
<div class="green"></div>
<div class="red"></div>
</body></html>

Или так
<html><head>
<style>
.red {
width: 100px ;
height: 100px ;
background: red ;
display: block ;
}
.green {
width: 100px ;
height: 100px ;
background: green ;
display: none ;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
var red = $(".red"), green = $(".green") ;
red.mouseover(function() {
red.appendTo("body").slideUp() ;
green.slideDown() ;
}) ;
green.mouseout(function() {
green.slideUp() ;
red.slideDown() ;
}) ;
}) ;
</script>
</head><body>
<div class="green"></div>
<div class="red"></div>
</body></html>

Сообщение от Гугл-мен
а как сделать так чтобы например один блок был 100 пикселей а другой 80,а то если просто меняю ширину у блоков,то при наведении сьезжает почему-то((
Ну, он по-любому "съезжать" будет
__________________
★ ²º¹³ ☆
Ответить с цитированием
  #7 (permalink)  
Старый 03.03.2013, 06:45
Аспирант
Отправить личное сообщение для Гугл-мен Посмотреть профиль Найти все сообщения от Гугл-мен
 
Регистрация: 14.12.2010
Сообщений: 68

понят
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как с помощью javascript взять данные из одного файла html и закинуть в другой? rusik Общие вопросы Javascript 10 08.08.2016 13:11
Определить высоту блока другой страницы Vladimir_Kl Javascript под браузер 12 07.07.2012 17:42
Скрытие, показ определённого div блока. Flashton Events/DOM/Window 5 11.04.2010 23:44
Скрытие блока после потери фокуса Nubi jQuery 2 06.02.2009 22:58
Копирование из одного input в другой input bar-boss Общие вопросы Javascript 7 08.04.2008 19:10