Question

I am using CSS and JS to animate a button here, the goal is when you click “Welcome” the button fades to “close” which it does, but once you click again I need it to fade back to welcome.

Here is a jsfiddle of my current code that works (only one step) as you see it on the live link

Here is a jsfiddle of a modified version where I tried to get it to work with a second click

Thanks in advance! Or if someone has another (easier method) please fill me in.

Answer 1

$("#welcomebtn").click(function() {
  $("#welcomebtn img.top").toggleClass("transparent");
  return false;
});

You can do this to toggle the button back when the lightbox is closed:

$(".jquery-lightbox-overlay").click(function(){
    $("#welcomebtn img.top").toggleClass("transparent");
});

But do note that the user can click anywhere to close the lightbox.