Title says it all really, I've followed every tutorial I could find but my alert() never gets run. I have no idea what I'm doing wrong.
var right = document.getElementById("right-container");
right.animate({
backgroundColor: '#fff'
}, {
duration: 550,
complete: function () {
alert('hello')
}
});`
Here's a simple fiddle to show the issue I am facing: https://jsfiddle.net/5shwn8r1/
You are selecting a dom element, not jquery element, wrap your dom element with $()
var right = document.getElementById("right-container");
$(right).animate({
backgroundColor: '#fff'
}, {
duration: 550,
complete: function () {
alert('hello')
}
});
Or you can select it with jQuery directly : $('#right-container')
To animate the background-color properties, I also included a jQuery plugin in the <head />:
<script src="//cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>
fiddle: https://jsfiddle.net/74c8xu1k/
You should try this code :
<div id="right-container" class="container-right">
<a onclick="switchPage(this)">click me</a>
</div>
<script>
function switchPage(e) {
var right = document.getElementById("right-container");
jQuery(right).animate({
backgroundColor: '#fff'
}, 550, function () {
alert('hello');
});
}
</script>
It's working for me and the alert is showing when i clicked on the 'click me' text.