Форум

Гугл-мен · #1 (**permalink**) 26.02.2013, 05:15

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

или как при наведении поменять размеры дива блока а потом при следующем наведении он вернулся в исходные..то есть при наведении раскрылся при отведении курсора закрылся..

ksa · #2 (**permalink**) 26.02.2013, 09:11

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

рпи наведении на блок див он плавно скрывался,а вместо этого скрытого показывался другой на его месте

Реализация сильно зависит от размеров тех блоков... Одинаковая ли она... Фиксирована ли..

ksa · #3 (**permalink**) 26.02.2013, 09:12

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

как при наведении поменять размеры дива блока а потом при следующем наведении он вернулся в исходные..

Как вариант...
Хранить в атрибутах нужные размеры и менять размеры элемента при наведении.

Hekumok · #4 (**permalink**) 26.02.2013, 10:36

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, 13:48

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

Hekumok · #6 (**permalink**) 26.02.2013, 14:25

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

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

Так?

<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, 07:45

понят

Форум

Справочник

Discord чат

Курсы javascript