I am currently in the process of building my professional portfolio to prepare for upcoming job opportunities. As someone who is new to the concepts I am practicing, I have encountered a challenge while trying to use jQuery's .animate() method. While I can easily utilize jQuery's .css() method, I face issues when attempting to implement .animate(); nothing seems to happen.
Despite rearranging the CDNs and Script tags within my Bootstrap and Semantic setup along with my custom CSS and JavaScript files, the problem persists.
Current order:
In the head:
Bootstrap CSS CDN
Bootstrap js CDN
Semantic CSS CDN
Custom Relative CSS
Before closing body tag:
jQuery js CDN
Popper js CDN
Semantic js CDN
Custom Relative JS (contains problematic code)
<button class="ui green basic button" id="click">Click</button>
<div id="trans">
<h4>Hello World</h4>
</div>
$('#click').click(function(){
$('#trans').animate({
width: "50%"
}, 500, function(){
alert("animated");
});
});
This Does Nothing
$('#click').click(function(){
$('#trans').css({
width: "50%"
});
});
This Works As Intended
Upon clicking the button with the ID of "click," I would expect the div with the ID of "trans" to decrease its width from 100% to 50% and display an alert saying "animated." However, this action does not occur at all. What puzzles me most is that using the .css() method to change the same property works without any issues, albeit lacking the desired animation effect.