Class call not working

Question

So I have created a class titled 1 and when I call it using the jQuery code below;

<script>
    $(document).ready(function() {
        $(".1").hide().fadeIn(3000);
    });
</script>

The Fade-In Effect does not work.

Here's all the necessary code;

<!DOCTYPE html>
<html>
<head>
<style>
body {
      background: url(bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
span.1{
    color: #fff;
    margin-left: auto;
    margin-right: auto;
    width: 8em;
    margin-top: 6em;
    font-size: 40px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function(){$(".1").hide().fadeIn(3000);});
</script>
</head>
<body>
<span class="1">Testing the Fade!</span>
</body>
</html>

Class names cannot start with a number. http://stackoverflow.com/a/449000/597419 — Danny, May 07 '14 at 17:25
As @Danny said, just change you class name from '1' to 'one', and it should work. — Traveling Tech Guy, May 07 '14 at 17:27

score 1 · Answer 1 · edited May 23 '17 at 10:32

1

Try renaming your class. Class names cannot start with a number.

Which characters are valid in CSS class names/selectors?

edited May 23 '17 at 10:32

Community

1
1

answered May 07 '14 at 17:31

Danny

7,368
8
46
70

score 0 · Answer 2 · answered May 07 '14 at 17:28

0

Do not start a class name with a number. Reference below...

http://www.w3schools.com/css/css_selectors.asp

answered May 07 '14 at 17:28

AK4VL

31
1
6

Class call not working

2 Answers2