Доброго дня друзья! Потихоньку помаленьку пополняю запасы знаний и встала тут у меня одна задача. Имеется форма с текстовыми полями (text, password, textarea). При наведении или фокусе появляется тень блока (box-shadow). Хочу сделать чтобы появлялась она и исчезала не моментально, а за небольшой промежуток времени.

Можете показать как это выглядит в коде?

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

$(document).ready(function(){
    $('input').each(function(){
        $(this).animate({boxShadow:'none'},1);
        $(this).mouseover(function(){
            $(this).stop().animate({boxShadow:'0 0 4px #008800'},300);
        });
        $(this).mouseout(function(){
            $(this).stop().animate({boxShadow:'none'},300);
        });
    });
});

По идее, как ты написал должна срабатывать. Можно еще попробовать

$.animate({
    'boxShadowX': '0px',
    'boxShadowY':'0px',
    'boxShadowBlur': '4px'
});

Там получается так что наведя на поле тень появляется почти как обычно (с рывком) и отведя мышь тень остаётся процентов на 50 прозрачной, потом при наведении просто эта прозрачность убирается, то бишь при наведении как обычно. Вот сижу и думаю от чего это.

во первых animate({boxShadow:'0 0 4px #008800'} не будет работать,
метод animate() работает с числовыми значениями.
что в css число: width,hight,opacity ...

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

_____________
kuzroman@list.ru

Действительно, оно меняется в конечный раз.
Можно через CSS3:

.my_input {
   
    -webkit-transition: -webkit-box-shadow 0.5s ease-out;
    -moz-transition: -moz-box-shadow 0.5s ease-out;
    transition: box-shadow 0.5s ease-out;
}

.my_input:hover {
    -webkit-box-shadow:'0 0 4px #008800;
    -moz-box-shadow: '0 0 4px #008800;
    box-shadow: '0 0 4px #008800;
}

Или поискать другой фреймворк.

можешь тоже самое сделать на чистом css с помощью transition
http://www.w3schools.com/cssref/tryit.asp?...css3_transition
В старых ie не будет работать, но это не значит что нужно отказываться от новых технологий, это значит что люди потихоньку все равно перейдут на новые браузеры. И у них тоже будет счастье)



_____________
kuzroman@list.ru

а можно чем-то готовым воспользоваться

_____________
"internet explorer всех правильней отображает страницы" ©

Через css это сделано, я вот думал с анимацией сделать через js, порылся в старых шаблонах у себя, нарыл один метод который я как-то использовал. Работает на ура.

-moz-transition: box-shadow 0.2s 0s ease;
-o-transition: box-shadow 0.2s 0s ease;
-webkit-transition: box-shadow 0.2s 0s ease;

IE правда как обычно выделяется)

kuzroman Да да я как раз вот его нарыл у себя в архивах)

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

все верно, так и надо сначала все что можно реализовать на чистом css, потом если нельзя на нем используем js.

_____________
kuzroman@list.ru