Почему вот так работает, а вот так не работает?

Question

[boga-net]

Скажите, почему вот так работает :

section.on('mousemove', function(e) {
  var xp = e.clientX;
  var yp = e.clientY;
  var w = $(window).width();
  var h = $(window).height();
  var btn = $('.new-game');
  var percent = 30;
	
  var x = (xp - (w/2)) / percent;
  var y = (yp - (h/2)) / percent;

  btn.css({
    'transform' : 
                  'rotateX(' + y + 'deg) ' +
                  'rotateY(' + -x + 'deg)'
  });

});

А вот так не работает :

var btn = $('.new-game');

function transforms(elem, percent) {

  section.on('mousemove', function(e) {
    var xp = e.clientX;
    var yp = e.clientY;
    var w = $(window).width();
    var h = $(window).height();
    
    var percent = percent;
    
    var x = (xp - (w/2)) / percent;
    var y = (yp - (h/2)) / percent;

    elem.css({
      'transform' : 
                  'rotateX(' + y + 'deg) ' +
                  'rotateY(' + -x + 'deg)'
    });

  });
};

transforms(btn,30);

З.Ы. $('.new-game') добавляется динамически на страницу

Хотелось бы сделать универсальную функцию, чтобы можно было передавать в неё элемент для анимации и процент, на который будет делиться

Код - https://jsfiddle.net/rw6n1w40/4/

Answer 1

[0xD34F]

$('.new-game') добавляется динамически на страницу

Вот вы сами на свой вопрос и ответили - нет никакого .new-game в тот момент, когда вы его пытаетесь получить.

Хотелось бы сделать универсальную функцию, чтобы можно было передавать в неё элемент...

Можно передавать селектор вместо элемента, в обработчике mousemove получать элемент, если его нет - ничего не делать, есть - ок, назначаем transform, или что там у вас. Типа так.

Comments

[boga-net]

0xD34F Благодарю