Глядя, чтобы построить расширение при наведении / контракт на размытие div

Question

Привет всем, я уже пару часов бьюсь головой о стены поисковой системы и думаю, что с таким же успехом могу просто спросить ...

Мне нужно создать div одного размерана размытие, скажем, 300x30, которое увеличивается до 300x300 при наведении и толкает все содержимое под ним и возвращается к размеру 300x30, когда размыто («больше не зависало» или как вы, дети, называете это сейчас, смеется).Может кто-то указать мне на некоторые ресурсы или даже дать мне немного кода, чтобы поиграть?Это будет высоко ценится!

Answer 1

Вы можете использовать Psuedo-классы в CSS, если вам не нужна анимация.

div.div {
   height: 30px;
   width: 300px;
   border: 1px solid black;
}

div.div:hover {
   height: 300px;
}​

Живой пример

http://jsfiddle.net/aFUmS/

$('.div').hover(function() {
    $(this).animate({
        height: '300px'
    }, 300);
},function() {
    $(this).animate({
        height: '30px'
    }, 300);
});​

jQueryНапример, если вы хотите анимацию

http://jsfiddle.net/CvhkM/

Answer 2

Если вы добавите переход к ответу Роберта, он только для CSS и вы получите анимацию:

Добавьте это в div (не в div: hover): transition: height 0.5s ease-in;

Я только что реализовал это на сайте, и это даже хорошо работает для мобильных устройств.Однако при свертывании и развертывании div должен иметь статическую высоту.

Answer 3

Или вы можете добавить .stop() перед .animate, и анимация остановится сразу после удаления указателя.

$('.div').hover(function() {
    $(this).stop().animate({
        height: '300px'
    }, 300);
},function() {
    $(this).stop().animate({
        height: '30px'
    }, 300);
});