Как я могу использовать $ (this) в JQuery для анимации этих изображений?

У меня есть три эскиза. Когда пользователь нажимает на них курсор, я не хочу угасать их от частичной непрозрачности до полной непрозрачности и обратно, когда их мышь больше не будет над ними. У меня есть этот код, который отлично работает, но кажется лишним повторить весь этот код для каждого изображения. Как я могу быть более эффективным в этом? Похоже, использование $ (этого) будет работать, но это не так. Что мне не хватает?

function imgFade()
{
$('#cluster').fadeTo(0,.3);
$('#launch').fadeTo(0,.3);
$('#gas').fadeTo(0,.3);

}
 $(document).ready(function () {
 $("#cluster").mouseover(function () {
 $("#cluster").fadeTo("slow", 1, function () {
 });
 });
 $("#cluster").mouseout(function () {
 $("#cluster").fadeTo("slow", .3, function () {
 });
 });
 });
;
3 ответа

Просто используйте селектор, который захватывает все три элемента:

$(document).ready(function () {
 $("#cluster, #launch, #gas").fadeTo(0, .3).mouseover(function () {
 $(this).fadeTo("slow", 1);
 }).mouseout(function () {
 $(this).fadeTo("slow", .3);
 });
 });

... а затем в обработчике this будет ссылаться на текущий элемент.

Обратите внимание, что вы можете .mouseover().mouseout() функции .mouseover().mouseout() а не повторно выбирать элементы с отдельными вызовами $("#cluster, #launch, #gas").

Вместо того, чтобы выбирать их по своим идентификаторам, это может быть более аккуратным, если вы предоставили всем подобным элементам общий класс, а затем выберите: $(".someClass").mouseover(...

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


Это должно работать...

function imgFade()
{
 $('#cluster, #launch, #gas').fadeTo(0,.3);

}
 $(document).ready(function () {
 $("#cluster, #launch, #gas").mouseover(function () {
 $(this).fadeTo("slow", 1, function () {
 });
 });
 $("#cluster, #launch, #gas").mouseout(function () {
 $(this).fadeTo("slow", .3, function () {
 });
 });
 });


Ваш код можно полностью переписать и укоротить следующим образом:

function imgFade() {
 $('#cluster, #launch, #gas').fadeTo(0, .3);
}

$(document).ready(function () {
 $("#cluster")
 .mouseover(function () {
 $(this).fadeTo("slow", 1);
 })
 .mouseout(function () {
 $(this).fadeTo("slow", .3);
 });
});

licensed under cc by-sa 3.0 with attribution.