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

Question

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

0

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

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 () {
                           });
                     });
              });
;

falkon114 26 окт. 2013, в 03:50

Источник

0

если бы вы попробовали это, вы могли бы выяснить, и да, вы можете использовать $ (это)
Ravi Hamsa 26 окт. 2013, в 01:04

Теги:

javascript

jquery

html

3 ответа

Ещё вопросы

если бы вы попробовали это, вы могли бы выяснить, и да, вы можете использовать $ (это)

Aurelio De Rosa · Answer 1 · 2013-10-25T23-30-00.000Z

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

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

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

Спасибо! Понял, что это было что-то легко

JxAxMxIxN · Answer 2 · 2013-10-25T23-20-00.000Z

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

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 () {
                           });
                     });
              });

Если селектор всегда один и тот же, лучше просто его кэшировать: var elems = $ ('# cluster, #launch, #gas'); Кроме того, вы можете положиться на функции цепочки для второй (анонимной) функции.
Да, я определенно выпустил это без особой мысли об оптимизации - пожалуйста, прости меня ...

nnnnnn · Answer 3 · 2013-10-25T22-38-00.000Z

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

          $(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() - вы можете просто опустить последний аргумент, если вы не хотите ничего делать, когда завершение затухания завершено.

Спасибо! Я подумал, что это было что-то простое, что мне не хватало. ура