I want to create an icon that turns into a close button when clicking on it and on clicking again on the button, it turns into the original icon again. So far I have managed to do the first part of the code. I know that I can use an if else condition but I don't know what to check for. If you are looking for a jsfiddle, I'm sorry since there is no cdn for snap.svg yet.
<span class="bars" data-icon-name="bars">
<svg id="svg"></svg>
</span>
<script type="text/javascript">
var Paper = Snap('#svg');
var linepaths = Paper.line(20, 20, 100, 20);
var linepaths1 = Paper.line(20, 33, 100, 33);
var linepaths3 = Paper.line(20, 46, 100, 46);
Paper.attr({
stroke:'#fff',
strokeWidth: 7
});
Paper.click(
function (){
linepaths.animate({x1:20,y1:20,x2:75,y2:75},500);
linepaths1.animate({x1:20,y1:75,x2:75,y2:20},500);
linepaths3.animate({x1:0,y1:0,x2:0,y2:0},1);
linepaths3.attr({
stroke:'#2ecc71',
strokeWidth: 7
});
});
</script>
You could just do a basic toggle I guess, it depends how you want it to work a bit..
Paper.click( function() { if( toggle ) {
buttonOn();
toggle = false;
} else {
buttonOff();
toggle = true; }
} );
function buttonOn() {
linepaths.animate({x1:20,y1:20,x2:75,y2:75},500);
linepaths1.animate({x1:20,y1:75,x2:75,y2:20},500);
linepaths3.animate({x1:0,y1:0,x2:0,y2:0},1);
linepaths3.attr({
stroke:'#2ecc71',
strokeWidth: 7
});
};
function buttonOff() {
linepaths.animate({x1:20,y1:20,x2:100,y2:20},500);
linepaths1.animate({x1:20,y1:33,x2:100,y2:33},500);
linepaths3.animate({x1:20,y1:46,x2:100,y2:46},1);
linepaths3.attr({
stroke:'#2ecc71',
strokeWidth: 7
});
};
jsfiddle http://jsfiddle.net/2UZr2/5/