Search code examples
jqueryanimationcssdelay

Delaying a function for transition duration

How can I make this script delay for 350 miliseconds while waiting for the css3 transition to end?

    <script type="text/javascript">
        $(document).ready(function() {
            var last = "";
            $("#thumbs a").click(function() {
                event.preventDefault();
                var graphic = $(this).attr("href");
                if(last != graphic) {
                    $("#placeholder").before( "<img src=\"" + graphic + "\" />" );
                    $("#mask").css("marginTop","-=450px");
                    last = graphic;
                }
            });
        });
    </script>

Basically, when you click, it should check to see if its been clicked within the last 350 miliseconds, and if it has, do nothing.

I've heard of the transitionend function, but I couldn't figure out how to implement it.

Solution

  • After document.ready, enclose your code in a function. Perhaps "function wait(){...code here...} then use a settimeout, such as var t = setTimeout(wait,350);

    Hope this helps. If not, try adding a load handler to your CSS transitioning object, then putting a setTimeout function in the load callback function. It should wait for the object to load, and set a timer to start your function 350 milliseconds after the object is loaded.