Как использовать цикл for для нацеливания на множество элементов div?

0

Мне нужно настроить несколько элементов div. Все они нуждаются в одном и том же действии. В основном они должны масштабироваться при наведении и понижении.

Как передать переменную из моего цикла в jquery и gsap?

for (var sca = 1; sca<=12; sca++) { 
  $( "#sc"+sca ).mouseover(function() {
    TweenLite.to("sc"+sca, .5, {css:{ scale:1.3 }, ease:Back.easeOut});
    $( "#sc"+sca ).css("z-index","100");
  })
  .mouseout(function() {
    TweenLite.to(sc1, .5, {css:{ scale:1 }, ease:Back.easeIn});
    $( "#sc"+sca ).css("z-index","1");
  });
}
  • 0
    дайте ваш HTML-код также.
Теги:
tweenlite
greensock

4 ответа

4
Лучший ответ

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

$('.myClass')
    .mouseover(function() {
        TweenLite.to(this, .5, { css: { scale: 1.3 }, ease: Back.easeOut });
        $(this).css("z-index", "100");
    })
    .mouseout(function() {
        TweenLite.to(this, .5, { css: { scale: 1 }, ease: Back.easeIn });
        $(this).css("z-index","1");
    });

Кроме того, я не уверен, почему вы используете TweenLite когда jQuery имеет встроенную анимацию?

Поделиться
  • 1
    Как сказал @rorymccrossan, это может привести к избыточности кода, так как включены методы анимации jquery и их эффективность
  • 0
    Спасибо Рори. В этом случае это все, что мне нужно.
Показать ещё 2 комментария
2 
$(document).ready(function () {
        $('.fooDiv').mouseover(function () {
            TweenLite.to(this, .5, { css: { scale: 1.3 }, ease: Back.easeOut });
            $(this).css("z-index", "100");
        })
        .mouseout(function () {
            TweenLite.to('sc1', .5, { css: { scale: 1 }, ease: Back.easeIn });
            $(this).css("z-index", "1");
        });
  });
Поделиться
0

Вы можете связать обработчик события с первым общим предком как событие делегирования. Это проблема производительности, если у вас есть много div для размещения вашего документа (лучше привязывать обработчик к каждому из этих div).

В качестве примера

// Delegated event
    $('#commonAncestorID')
        .on('mouseover','.divClass', function() {
            TweenLite.to(this, .5, { css: { scale: 1.3 }, ease: Back.easeOut });
            $(this).css("z-index", "100");
        })
        .on('mouseout','.divClass', function() {
            TweenLite.to(this, .5, { css: { scale: 1 }, ease: Back.easeIn });
            $(this).css("z-index","1");
        });

См. Документацию здесь

Поделиться
  • 0
    Кроме того, любой div, который будет добавлен позже через js в этом же контейнере, также будет влиять на событие mouseover / mouseout!
0

Не используйте цикл, вместо этого привязывайте обработчик событий ко всем элементам с идентификатором, начинающимся с "sc", а затем используйте ссылку на фактический элемент внутри функций:

$('[id^="sc"]').mouseover(function() {
    TweenLite.to(this.id, .5, {css:{scale:1.3}, ease:Back.easeOut});
    $(this).css("z-index","100");
  })
  .mouseout(function() {
    TweenLite.to(this.id, .5, {css:{scale:1}, ease:Back.easeIn});
    $(this).css("z-index","1");
});

Или, как предложил Рори, вместо этого используйте класс (селектор класса будет немного лучше).

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

for(var sca = 1; sca <= 12; sca++) {
    (function(sca) {
        $( "#sc"+sca).mouseover(function() {
            TweenLite.to("sc"+sca, .5, {css:{scale:1.3}, ease:Back.easeOut});
            $( "#sc"+sca ).css("z-index","100");
        })
        .mouseout(function() {
            TweenLite.to("sc" + sca, .5, {css:{scale:1}, ease:Back.easeIn});
            $( "#sc"+sca ).css("z-index","1");
        });
    })(sca);
}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню