Laravel 错误：jQuery.easing 不是 function

Question

I have a laravel project in which I want to use jQuery UI for smooth transitions and effects.我有一个 laravel 项目，我想在其中使用 jQuery UI 来实现平滑的过渡和效果。 I added the jquery-ui.js to the public/js folder.我将jquery-ui.js添加到public/js文件夹中。 The same as my current jQuery file which works as intended.与我当前的 jQuery 文件相同，该文件按预期工作。

I imported the javascript file in my blade template like so:我在刀片模板中导入了 javascript 文件，如下所示：

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <link href="{{ asset('css/animate.css') }}" rel="stylesheet">
    <link href="{{ asset('css/jquery-ui.css') }}" rel="stylesheet">
</head>
<body>
    <div id="app">
        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
            <div class="container">
                <a class="navbar-brand" href="{{ url('/') }}">
                    {{ config('app.name', 'Laravel') }}
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <!-- Left Side Of Navbar -->
                    <ul class="navbar-nav mr-auto">

                    </ul>

                    <!-- Right Side Of Navbar -->
                    <ul class="navbar-nav ml-auto">
                        <!-- Authentication Links -->
                        @guest
                            <li class="nav-item">
                                <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
                            </li>
                            @if (Route::has('register'))
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
                                </li>
                            @endif
                        @else
                            <li class="nav-item dropdown">
                                <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                                    {{ Auth::user()->name }} <span class="caret"></span>
                                </a>

                                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="{{ route('logout') }}"
                                       onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                        {{ __('Logout') }}
                                    </a>

                                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                                        @csrf
                                    </form>
                                </div>
                            </li>
                        @endguest
                    </ul>
                </div>
            </div>
        </nav>

        <main class="py-4">
            @yield('content')
        </main>
    </div>


    <script type="text/javascript" src="{{ asset('js/jquery-3.4.1.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/jquery-ui.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/main.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
</body>
</html>

When I try to call the toggle function on a button click I get the following error:当我尝试在按钮单击上调用切换 function 时，出现以下错误：

app.js:14040 Uncaught TypeError: jQuery.easing[this.easing] is not a function app.js:14040 未捕获类型错误：jQuery.easing[this.easing] 不是 function

While regular jQuery works fine, jQuery UI does not.虽然常规 jQuery 工作正常，但 jQuery UI 不能。

Main.js主.js

$(document).ready(function() {

    $('#slide-next').on('click', function() {
        $('.register-form-user').toggle("slide", { direction: "left" }, 1000);
    });
});

All my paths are correct.我所有的路径都是正确的。 When downloading the jQuery UI file I made sure I selected all the available options including easing.下载 jQuery UI 文件时，我确保选择了所有可用选项，包括缓动。

What is causing this error?是什么导致了这个错误？

Bootstrap.js引导程序.js

window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from 'laravel-echo';

// window.Pusher = require('pusher-js');

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: process.env.MIX_PUSHER_APP_KEY,
//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
//     encrypted: true
// });

Answer 1

jQuery is already included in your app.js bundle from the boostrap.js file. jQuery 已经包含在 boostrap.js 文件中的 app.js 包中。 The last call to app.js in your html overrides the previous instance of jquery, making it load after jQuery UI. html 中对 app.js 的最后一次调用会覆盖之前的 jquery 实例，使其在 jQuery UI 之后加载。 jQuery must be loaded before jquery-ui. jQuery 必须在 jquery-ui 之前加载。

Change this改变这个

<script type="text/javascript" src="{{ asset('js/jquery-3.4.1.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/jquery-ui.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/main.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>

To this对此

<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/jquery-ui.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/main.js') }}"></script>

and remove the deferred script tag from your <head> section并从您的<head>部分中删除延迟脚本标记

Laravel 错误：jQuery.easing 不是 function

问题描述

1 个解决方案

解决方案1
4 已采纳 2019-10-30 18:45:09

Laravel 错误：jQuery.easing 不是 function

问题描述

1 个解决方案

解决方案1 4 已采纳 2019-10-30 18:45:09

解决方案1
4 已采纳 2019-10-30 18:45:09