CODEWITHSUNDEEP
jquerycss-animations
Eric Brockman
Eric Brockman

Reputation: 854

jQuery addClass function not working on site

I'm creating a website that requires a quick animation of a truck to drive across the screen once the document is ready.

markup:

<div id="truck">
    <img src="<?php directory() ?>/images/truck.png">
</div>

CSS:

#truck {
  position: absolute;
  height: 100vh;
  width: 100%;
}

#truck img {
  position: absolute;
  top: -100%;
  right: -100%;
  -webkit-transition: all 2s ease-in-out;
  -moz-transition: all 2s ease-in-out;
  -o-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
  z-index: 9;
}

#truck.drive img {
  position: absolute;
  top: 100%;
  right: 100%;
}

jQuery:

$( document ).ready(function() {
    $('#truck').addClass('drive');
});

So this seems like it's working when I plug it into a codepen: https://codepen.io/ericbrockman/pen/ZEYyQJe

but when I try to use it on the site I'm creating, the div with the ID truck doesn't get the class "drive" added to it on document ready. Both the jQuery I wrote and the jQuery library are being loaded to the DOM as resources.

live site: http://cyb3rtruck.com

Any help figuring this out would be, as always, greatly appreciated! thanks!

Upvotes: 0

Views: 32

Answers (3)

Akbar Ali
Akbar Ali

Reputation: 456

jQuery(document).ready(function($) { 
   $('#truck').addClass('drive');
});

Upvotes: 1

Amit Sharma
Amit Sharma

Reputation: 717

The jQuery isn't assigned to the '$' variable

Upvotes: 0

Rob Kwasowski
Rob Kwasowski

Reputation: 2780

It seems that the distribution of jQuery that you're using doesn't assign the jQuery function to $. So just set it before your $( document ).ready function.

var $ = jQuery;
$( document ).ready(function() {
  $('#truck').addClass('drive');
});

Upvotes: 1

Related Questions