creating an array in js for simple mouseover

[Dcoo]

I'm used to using flash to create an array, but I cant get my head around this.
so far I have this working ( I finaly have tweenmax working in wordpress, but thats conversation for another day ) any help would be greatly appreciated ! thanks 
 

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script><script>



jQuery(document).ready(function() {


var whorolls = ["#movmystuff1", "#movmystuff2", "#movmystuff3", "#movmystuff4"];


document.getElementById("whorolls").addEventListener('mouseover', btnHandler, false);
var rotation = 0;




function btnHandler(e) {
  TweenMax.to("whorolls", 2, {
      scale: 1.2,
      ease: Power4.easeOut});
}
});



</script>

[Diaco]

hi

 

pls try like this :

 

var all = ["#red", "#blue"];

for(var i=0;i<all.length; i++){
  document.querySelector(all[i]).addEventListener('mouseover', btnHandler);
};

function btnHandler(e) {  TweenMax.to(e.target,2,{scale: 1.5}) };

or using Class name :

 

var all = document.querySelectorAll('.box');

for(var i=0;i<all.length; i++){
  all[i].addEventListener('mouseover', btnHandler);
};

function btnHandler(e) { TweenMax.to(e.target,2,{scale: 1.5}) };

See the Pen epmxxe by MAW (@MAW) on CodePen

[Dcoo]

Thanks Diaco, 

i did not get your code to work for me, and it could be that Im trying to get it to work in Wordpress.

 

the only code I can get to work is in Wordpress is from an example on this page 

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
jQuery(document).ready(function(){
TweenMax.set('#slide3', {opacity: 0.5});
});
</script>

and to further complicate things, i need to add  to spin a div when the user rolls over a link, so I add an id to the div that will spin and to the link that will trigger it. but I did get this workaround to work, but without an array. ( and runs under Wordpress) 

 

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script><script>

jQuery(document).ready(function() {

document.getElementById("spinit1").addEventListener('mouseover', btnHandler, false);
var rotation = 0;

function btnHandler(e) {
  TweenMax.to("#spin1", 1, {
      scale: 1.2,
      ease: Power4.easeOut});
}
}); 

jQuery(document).ready(function() {


document.getElementById("spinit1").addEventListener('mouseout', btnHandler, false);
var rotation = 0;

function btnHandler(e) {
  TweenMax.to("#spin1", .25, {
      scale: 1,
      ease: Power4.easeOut});
}
}); 

jQuery(document).ready(function() {

document.getElementById("spinit2").addEventListener('mouseover', btnHandler, false);
var rotation = 0;

function btnHandler(e) {
  TweenMax.to("#spin2", 1, {
      scale: 1.2,
      ease: Power4.easeOut});
}
}); 


jQuery(document).ready(function() {


document.getElementById("spinit2").addEventListener('mouseout', btnHandler, false);
var rotation = 0;
Ω

function btnHandler(e) {
  TweenMax.to("#spin2", .25, {
      scale: 1,
      ease: Power4.easeOut});
}
}); 


jQuery(document).ready(function() {



document.getElementById("spinit3").addEventListener('mouseover', btnHandler, false);
var rotation = 0;


function btnHandler(e) {
  TweenMax.to("#spin3", 1, {
      scale: 1.2,
      ease: Power4.easeOut});
}
}); 


jQuery(document).ready(function() {


document.getElementById("spinit3").addEventListener('mouseout', btnHandler, false);
var rotation = 0;

function btnHandler(e) {
  TweenMax.to("#spin3", .25, {
      scale: 1,
      ease: Power4.easeOut});
}
}); 


jQuery(document).ready(function() {


document.getElementById("spinit4").addEventListener('mouseover', btnHandler, false);
var rotation = 0;


function btnHandler(e) {
  TweenMax.to("#spin4", 1, {
      scale: 1.2,
      ease: Power4.easeOut});
}
}); 


jQuery(document).ready(function() {




document.getElementById("spinit4").addEventListener('mouseout', btnHandler, false);
var rotation = 0;



function btnHandler(e) {
  TweenMax.to("#spin4", .25, {
      scale: 1,
      ease: Power4.easeOut});
}
}); 
  </script>

[Rodrigo]

Hi,

 

Since you're using jQuery I see no reason to keep using documentGetElementById as a selctor, just use jquery. In order to keep using the dollar sign, you can keep jquery in a IIFE:

 

https://en.wikipedia.org/wiki/Immediately-invoked_function_expression

(function($){

// this is the equivalent to document.ready();
$(function(){
  // your code here
});

}(jQuery));

Finally you can use a common class in all your spin elements (the ones that will trigger the spin function) and use that selector to spin the common element. Then you can create a single tween to spin the element and play/reverse it.

 

See the Pen jbEggN by rhernando (@rhernando) on CodePen

 

That creates far less code and it should work. Let us know if you need something else.

 

Happy Tweening!!

[Dcoo]

Thats great thanks guys!