1

CODEPEN Example http://codepen.io/dada78/pen/b50de869b75b32e220956bb36052733b

I am trying to figure out how to make the selectedId variable used in my highlightSelection function accessible in my function "fadeOutUnselected(notThisId)" on line 40 in the codepen?

function fadeOutUnselected(notThisId) {
var tl = new TimelineMax();

tl.to(".options:not([id=" + notThisId +"]), input[type='radio']", 0.5, {autoAlpha:0}, "getSlidesReady+=4") //fade out all options but the selected one  
//.to("#"+ selectedId, 0.5, {y:0}) //animate selectedId option up
  .set(".options:not([id=" + notThisId +"]), input[type='radio']", {y:0})
return tl;
}

Any help appreciated. All I would like to do is animate the option the user selects ("selectedId" variable) up to position y:0.

Thanks!

user2163224
  • 131
  • 2
  • 3
  • 12
  • Try declaring it up at the top, near your percentage, then in the hightlightSelection function just modify it, that way it's available globally. – Caleb O'Leary Apr 18 '16 at 20:32
  • Thanks Caleb, I tried adding it like so to the top, right underneath the percentage variable: `var selectedId = "option-" + label.getAttribute("for").slice(-1); `and inside the highlightSelection function I just added `var tl = new TimelineMax();` but I still can't get it working...:-( – user2163224 Apr 18 '16 at 20:42

1 Answers1

1

You should do something like

var globalSelectedId;

function highlightSelection(label) {
    // same code 
    globalSelectedId = selectedId;
}

function fadeOutUnselected(notThisId) {
    // same code, you can acces globalSelectedID
}
Tim B
  • 1,983
  • 1
  • 20
  • 21
  • You should have a look at this post though : http://stackoverflow.com/questions/2613310/ive-heard-global-variables-are-bad-what-alternative-solution-should-i-use – Tim B Apr 18 '16 at 20:52