Подписи к изображениям Jquery

Я использовал этот метод раньше. Кажется, работает довольно хорошо, и вы не создаете и не удаляете элементы постоянно, а просто перемещаете и меняете содержимое одного из них.

Посмотреть рабочий скрипт

Начните с вашего единственного пустого div:

<div id='caption'></div>

JS: слушатели событий при наведении курсора мыши и наведении курсора мыши, чтобы расположить div, написать заголовок и затемнить его.

$('img').hover(function(){
    var yoffset = $(this).height();
    var width = $(this).width();
    var coords = $(this).offset();

    $('#caption').html($(this).data('caption'))
        .width(width)
        .animate({
            top: coords.top + yoffset - $('#caption').height(),
            left: coords.left            
        }, 0, function(){
            $(this).animate({
                opacity: 'show'
            }, 200);   
        });
});

$('img').mouseout(function(){
    $('#caption').animate({
        opacity: 'hide'
    }, 100);   
});

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

#caption {
    position: absolute;
    z-index: 99;
    display: none;
    background: rgba(0,0,0,0.6);
    color: white;
    padding: 2px;  
}

Что касается того, используете ли вы атрибуты title или alt, вы можете использовать .attr вместо .data, но таким образом вы можете указать текст заголовка, ничего не повредив. Атрибуты данных HTML5 используются с jQuery следующим образом.

<img src='#' data-caption='This is some caption text' />

а затем доступ так:

$('img').data('caption'); //returns our caption text