How to use mixitup & jquery together?

Tell me, on page error Uncaught TypeError: $(...) is not a function , if it is on WordPress hosting,on local, everything works correctly,so I googled write that the conflict of libraries, how to fix it?The js code
<script type="text/javascript">
 $(function () {

 var filterList = {

 init: function () {
$('#portfoliolist').mixitup({
 targetSelector: '.portfolio',
 filterSelector: '.filter',
 effects: ['fade'],
 easing: 'snap',
 // call the hover effect
 onMixEnd: filterList.hoverEffect()
 }) 

},

 hoverEffect: function () {

 $('#portfoliolist .portfolio').hover(
 function () {
 $(this).find('.label').stop().animate({bottom: 0}, 200, 'easeOutQuad');
 $(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad'); 
},
 function () {
 $(this).find('.label').stop().animate({bottom: -40}, 200, 'easeInQuad');
 $(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad'); 
 } 
 ); 

}

};
 filterList.init(); 
 }); 
</script>

Just in the layout everything works correctly,but on the website anymore,
June 10th 19 at 15:40
1 answer
June 10th 19 at 15:42
Try this:

(function ($) {
 $(document).ready(function () {
 var filterList = {

 init: function () {
$('#portfoliolist').mixitup({
 targetSelector: '.portfolio',
 filterSelector: '.filter',
 effects: ['fade'],
 easing: 'snap',
 // call the hover effect
 onMixEnd: filterList.hoverEffect()
 }) 

},

 hoverEffect: function () {

 $('#portfoliolist .portfolio').hover(
 function () {
 $(this).find('.label').stop().animate({bottom: 0}, 200, 'easeOutQuad');
 $(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad'); 
},
 function () {
 $(this).find('.label').stop().animate({bottom: -40}, 200, 'easeInQuad');
 $(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad'); 
 } 
 ); 

}

};
 filterList.init(); 
});
})(jQuery);

Find more questions by tags WordPressjQuery