Home/ Questions/Q 8371653
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T14:12:57+00:00

I found the JSFiddle code below , and when I do an exact copy

  • 0

I found the JSFiddle code below , and when I do an exact copy and paste into an html document it doesn’t work. I am using Chrome. and the Javascript console says there is a syntax error but I don’t see anything. I don’t understand why this isn’t working.

JSFiddle (working)

http://jsfiddle.net/jkUyT/3/

Non Working Copy and Paste (alert doesn’t launch when I hover over the Div)

<!DOCTYPE html>
<meta charset="UTF-8">
<title>fun</title>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>




<a id="animationTest">Hover over me</a>​



<!--CSS-->
<style>
#animationTest {
            width: 150px;
            text-align: center;
            display: block;
            padding: 20px;
            background: #000;
            color: #fff;
            border-bottom: 10px solid red;
            cursor: pointer;
                    transition: border-bottom 0.5s linear; /* vendorless fallback */
                   -o-transition: border-bottom 0.5s linear; /* opera */
                -ms-transition: border-bottom 0.5s linear; /* IE 10 */
               -moz-transition: border-bottom 0.5s linear; /* Firefox */
            -webkit-transition: border-bottom 0.5s linear; /*safari and chrome */
        }

        #animationTest:hover {
            border-bottom: 10px solid blue;
        }​
</style>

<!--Javascript -->
<script>

var animationTest = document.getElementById('animationTest');

animationTest.addEventListener('webkitTransitionEnd', function(){
    alert("Finished animation (listener)!");
    console.log("Finished animation (listener)!");
});

$('#animationTest').bind("webkitTransitionEnd", function(){
    alert("Finished animation (bind)!");
    console.log("Finished animation (bind)!");
});

​
</script>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ok found your problem, you got invalid character in last two lines before 

    $('#animationTest').bind("webkitTransitionEnd", function(){
    alert("Finished animation (bind)!");
    console.log("Finished animation (bind)!");
});
-->HERE
​-->HERE

    So delete these two lines.

    • 0