ты чето путаешь, 1 блок не может быть меньше дочернего

animate() with Jquery

http://slyweb.ru/jquerydoc/animate-params-...ng-callback.php

razoramus
за прозрачность отвечает свойство opacity, если черной пленкой, то поверх вешай черный блок и св-во opacity

//вешаем событие "наведение мыши" на 1 елемент див с классом а2
//и вызываем функцию funLeft(); 
document.getElementsByClassName('a2')[0].onmouseover=function(){
funLeft();
}
//здесь начальное значение,переменная глобальна.
var left=0;
//замкнутая функция на себя с помощью setTimeout ,вызывается через каждые 20мс
//пока left не достигнет 600,
//значение left с шагом в 5 также заносится в style.backgroundPosition.
function funLeft() {
left+=5;
document.getElementsByClassName('a2')[0].style.backgroundPosition = left+'px 0px';
if (left<600){setTimeout(funLeft,20);}
}

Вот и все ,скрипт не проверял ,но по идее должен работать.
Вешать событие только после инициализации нужного елемента в ДОМ.
или так.
<div class="a2" onMouseOver="funLeft()"></div>

У стилей нет свойства затемнения ,тем более для картинки фона,значит нужно накладывать еще один див с черным фоном и работать через style.opacity
ИЕ opacity непонимает поэтому прийдется для него сделать вот так

style.filter='progid:DXImageTransform.Microsoft.Alpha(opacity='+opac+')';

где opac это значение прозрачности от 0 до 100,
так же стоит помнить что для остальных браузеров максимальное значение прозрачности это 1
значит делаем так

style.opacity=opac/100;

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

Накидал..

<a href="#">
    <div class="img">
        <div class="shadow"></div>
    </div>
</a>

.img {
    width:300px;
    height:200px;
    background:url(./132.png) left top no-repeat;
}

.shadow {
    width:300px;
    height:200px;
    background:#000;
    opacity:0;
}

.shadow:hover {
    opacity:0.8;
}

А куда style.opacity=opac/100; впихнуть? Вроди правильно накидал.. И как сделать плавно? Просто в JS не знаю. Руки ещё не дошли

анимация

if (opac<50){setTimeout(funOpac,20);}

Решил сделать так, сделать в фотошопе полупрозрачную картинку чёрного цвета под размер и в бэкграунд прописал, потом порыскал про плавное исменение прозрачности любого эллемента на JQ, в обще вот код, подправил под себя и всё робит, мало ли кому пригодиться. Проверял в IE7+ Всё ок

//jQuery прозрачность любого элемента
$(document).ready(function(){
    $('.shadow').each(function(){
        $(this).animate({opacity:'0.0'},1);
        $(this).mouseover(function(){
            $(this).stop().animate({opacity:'1.0'},300);
        });
        $(this).mouseout(function(){
            $(this).stop().animate({opacity:'0.0'},300);
        });
    });
});

Всем спасибо

Прозрачность по разному поддерживают броузеры, ИЕ имеет фильтры другие через opacity: если не изменяет память.
На мой взгляд легче применить БГ фон ПНГ с прозрачностью и кросброузерностью и ЯваСкрипт.
Хотя и первое и второе на мой взгляд это отглосы прошлых эпох.
Что то затемнить чтоб что то показать, ну и бесят эти закорючки многих.
Фишка не понятная юзеру.
Сколько не спрашивал юзеров, ни кто вразумительного ответа не дал, хорошо или плохо.
А значит хреново......

Кто людям помогааааает,тот тратит время зря... (Шапокляк).

Этот код использует обычную смену позиции div? или канвасы рисует? Если див двигает, это будет лагать на нетбуках возможно.

razoramus
Ниже скзали про смену позиций див.
Я бы уточнил, берш три дива с разной прозрачностьюПНГ фоном, естественно прикручиваешь заглушку ЦСС чтоб в ИЕ работала прозрачность.
Дивы анимируешь яваскрипт, пару строчек всего.
И будет у тебя плавное затемнение.

I++
В head цепанул библиотеку jq и применил вышеуказанный код. Он меняет прозрачность блока shadow с 0 до 0.5(в моём случае). у меня на бэкграунде блока img стоит картинка и в shadow так же(только чёрная). Думаю смысл понятен. Проверят в ie начиная с 7го, вроди всё норм, за исключением курсора, при наведении он остаётся стрелкой а не pointer. Меня это как то не задевает.