Jquery: как увеличить изображение при наведении курсора на динамически генерируемые изображения

Question

Как увеличить изображение при наведении курсора на динамически генерируемые изображения из базы данных. Я использую код c # для привязки изображений в пользовательском интерфейсе. Я пробовал разные плагины Jquery, но у большинства из них были проблемы с совместимостью с некоторыми браузерами (IE 6). Пожалуйста, предложите мне выход.

Спасибо.

Answer 1

Если вы динамически добавляете изображения на свою страницу (из базы данных или другого внешнего источника), ваша первая проблема заключается в том, как обеспечить, чтобы jQuery знал о них.

JQuery имеет несколько прослушивателей событий для динамически генерируемого контента, таких как $ .live () и $ .delegate (). Вы захотите назначить слушателя для области содержимого, чтобы отслеживать любые новые изображения, загружаемые с помощью одной из этих двух функций jQuery.

Как только ваш код узнает о недавно добавленном изображении, ваша следующая задача - добавить поведение увеличения / уменьшения. В зависимости от того, что вы хотите, возможно, лучше всего использовать событие jQuery $ .hover (). Итак, ваш код будет выглядеть примерно так:

$("#myContentRegion").delegate("img", "hover", function(){
    $(this).animate({ 
            width: 200, height: 200 
        }, 5000, function() {
    $(this).animate({ width: 100, height: 100 });
  });

});