лучший способ наведения курсора мыши на jquery?
Вопрос
Я пытаюсь создать эффект, при котором, если вы наведете курсор на изображение, цвет текста под ним изменится.А также, когда вы наводите указатель мыши, цвет возвращается к исходному цвету.Страница: http://vitaminjdesign.com/work.html
Мой код:
if(window.jQuery){jQuery(function(){
(function(){ jQuery('div#one img').bind('mouseover', function(event, ui){var target = jQuery('div#one h2'); target.animate({'color':'#111111'},250,'linear')});})();
})};
Я повторил это примерно 15 раз на странице, и похоже, что это довольно глючно и не гладко.Поиграйте с ним минутку.Есть ли лучший способ сделать это?
Решение
Попробуйте использовать зависать, Преимущество состоит в том, что вы можете указать события mousein и mouseout в одной и той же функции.Если вам нужна помощь в том, как конкретно применить то, что у вас есть, к событию наведения, просто прокомментируйте, и я посмотрю, что я могу сделать.
РЕДАКТИРОВАТЬ:
Хорошо, в коде вашего сайта это уже есть.
//On mouse over those thumbnail
$('.zitem').hover(function() {
//Set the width and height according to the zoom percentage
width = $('.zitem').width() * zoom;
height = $('.zitem').height() * zoom;
//Move and zoom the image
$(this).find('a img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200});
//Display the caption
$(this).find('div.caption').stop(false,true).fadeIn(200);
},
function() {
//Reset the image
$(this).find('a img').stop(false,true).animate({'width':$('.zitem').width(), 'height':$('.zitem').height(), 'top':'0', 'left':'0'}, {duration:100});
//Hide the caption
$(this).find('div.caption').stop(false,true).fadeOut(200);
});
Я собираюсь добавить в этот код две строки, которые будут делать то, что вы хотите.
//On mouse over those thumbnail
$('.zitem').hover(function() {
//Set the width and height according to the zoom percentage
width = $('.zitem').width() * zoom;
height = $('.zitem').height() * zoom;
//Move and zoom the image
$(this).find('a img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200});
//Change the header colour
$(this).siblings('h2').animate({'color':'#111111'},250,'linear');
//Display the caption
$(this).find('div.caption').stop(false,true).fadeIn(200);
},
function() {
//Reset the image
$(this).find('a img').stop(false,true).animate({'width':$('.zitem').width(), 'height':$('.zitem').height(), 'top':'0', 'left':'0'}, {duration:100});
//Change the header colour back
$(this).siblings('h2').animate({'color':'#EE4E07'},250,'linear');
//Hide the caption
$(this).find('div.caption').stop(false,true).fadeOut(200);
});
Это должно сработать