JQuery animate complete function doesn't run

user_9700228 0
Viewed 53

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/

jquery javascript
2 Answers

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>

Read more

fiddle: https://jsfiddle.net/74c8xu1k/

user_21272770

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.

user_161077370
Related