I have been working on the following code snippet:
var isOn = false;
$('.switch').on("click",function(){
if (isOn){
$('.toggle').animate({
left:"18px"
},10,"linear",
{
complete: function(){
$('#label').text("ON");
}
});
isOn = false;
} else {
$('.toggle').animate({
left:"4px"
}, 10,"linear",
{
complete: function(){
$('#label').text("OFF");
}
});
isOn = true;
}
});
This code implements a toggle switch functionality using jquery. Originally, the switch worked without the use of the animate() method.
However, I had to add the animation through jQuery as the CSS animation was causing issues in Internet Explorer.
You can see the original effect without animation here.
I am facing an issue where the complete function in the first link does not seem to be working as expected. Any insights on why this might be happening?
EDIT: The code is now functioning properly, but there are still some compatibility issues with Internet Explorer.