Member Avatar for Bensirpent07

I have a website that has been using background color animations for a while when all of sudden they just stopped working. I can't think of any major change I've done that would have caused it. So I created a folder to test out my jquery.min.js and jquery.ui.js files. Here is the code:

index.php
http://pastebin.com/D3sTEfvc

testing.css
http://pastebin.com/mEm4LSnd

welcomeSection.php
http://pastebin.com/jBA4xBLM

animate.js
http://pastebin.com/bEF9g1VH

Sorry I had to use all the paste bins for such short code. It wasn't inserting code correctly through DaniWeb.
One thing to note is that when you open this page I have it set you can see in the console that the code is running just fine. But the background-color is not changing. This is not only for background color, it's also not working on a border-color animation either. Plus it does not recognize 'easeOutQuint'. All of this leads to believe that something is wrong between Jquery and Jquery UI. I tried downloading the Jquery and Jquery UI files again but this did not fix the problem.

  • 2 Contributors
  • 2 Replies
  • 350 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Bensirpent07

Dani AI

Generated

Short diagnosis and concrete next steps.

As asked, the console message reported by points to a missing easing handler — that usually means the named easing function and/or the color-effect extension are not registered when the animation runs. Common causes are wrong script order, a missing easing plugin, the absence of a color-effects shim, or jQuery being reloaded after plugins have attached.

Quick checks (run in the browser console):

console.log('jQuery', $.fn && $.fn.jquery);
console.log('jQuery UI', $.ui && $.ui.version ? $.ui.version : 'not loaded');
console.log('easing', Object.keys($.easing || {}));

Also scan the Network tab for 404s and search the page for multiple jQuery <script> tags (re-loading jQuery after plugins clears registered plugins).

Fixes to apply (in order):

  • Ensure jQuery core is loaded first, then jQuery UI, then any plugins (easing, color), then the site script that calls .animate.
  • Add the jQuery Easing plugin to get easings like easeOutQuint (that name is not in jQuery core).
  • Add the jQuery Color plugin or include jQuery UI’s effects modules if color animation is needed — plain jQuery.animate does not animate colors without one of these.
  • Avoid the jQuery "slim" build (it omits effects) and avoid loading jQuery twice.

Example script order (minimal):

<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
<script src="jquery.easing.js"></script>
<script src="jquery.color.js"></script>
<script src="animate.js"></script>

Note: a quick isolation test is a minimal HTML page that uses known-good CDN copies of jQuery, jQuery UI, jquery.easing and jquery.color — if that page animates colors with the chosen easing, the problem is with local load order or a missing file rather than the animation code itself.

Recommended Answers

All 2 Replies

Member Avatar for hericles

Any errors showing in the console?

Member Avatar for Bensirpent07

Just errors about easing.

Uncaught TypeError: na.easing[this.easing] is not a function

Which again points to JQueryUI not being used

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.