Javascript-форум - Скрытие одного блока и показать другой

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Скрытие одного блока и показать другой (https://javascript.ru/forum/jquery/35895-skrytie-odnogo-bloka-i-pokazat-drugojj.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() {
$(".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>

<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>

Hekumok
ваще первый вариант в тему а как сделать так чтобы не снизу выезжало а сверху и например один блок был 100 пикселей а другой 80,а то если просто меняю ширину у блоков,то при наведении сьезжает почему-то((

Цитата:

Сообщение от Гугл-мен

а как сделать так чтобы не снизу выезжало а сверху

Так?

<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,а то если просто меняю ширину у блоков,то при наведении сьезжает почему-то((

Ну, он по-любому "съезжать" будет