Looking at your code the first thing you would want to do as a step by step on how to do it yourself is refactor out all your uses of $(".green")
into a local variable.
This would give:
function showGreen() {
var element = $(".green");
element.show();
if (position == 0) {
element.css({opacity : "0", left: "0"}).transition({opacity:1}, 500, ezin);
} else if (position < 2){
element.css({left : "100%", });
} else if (position > 2) {
element.css({left : "-100%", });
}
position = 2;
goodbye();
element.css({scale: "1"}).transition({left:0}, 500, ezin).addClass("active");
}
This is the same sort of refactoring that you might do when you would want to remove any kind of variable.
What you do after that depends on how you are calling these functions. Standard refactoring would then involve just promoting it to a function parameter and observing that at this stage showGreen
and showRed
would be the same (assuming there are no minor differences in properties I've not noticed).
function show(element) {
element.show();
if (position == 0) {
element.css({opacity : "0", left: "0"}).transition({opacity:1}, 500, ezin);
} else if (position < 2){
element.css({left : "100%", });
} else if (position > 2) {
element.css({left : "-100%", });
}
position = 2;
goodbye();
element.css({scale: "1"}).transition({left:0}, 500, ezin).addClass("active");
}
you could then call this as show($('.red'))
or show($('.green'))
.
Alternatively if you want to call it more like:
$('.red').click(showRed);
Then you could change the function to start
var element = $(this)
and that should do what you want.