web-dev-qa-db-ja.com

jQuery "$(...)。effectは関数ではありません"

すでにフォーラムを検索しましたが、jQueryの「効果」関数で発生した問題を修正する方法が見つかりません。

コードで正確にエラーTypeError: $(...).effect is not a functionが発生します:

$('div.step').removeClass('active');
$("div.step").effect('slide', {direction: 'right', mode: 'hide'}, 500);
$('#step' + step + '').addClass('active');
$('#step' + step + '').effect('slide', {direction: 'right', mode: 'show'}, 500);

このようなjQueryとjQueryUIの両方を<head></head>に含めました。

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

しかし、無駄に、あなたは何か考えがありますか?ありがとうございました

14
mentinet

JQueryおよびjQueryUI宣言の後にカスタムスクリプトを配置し、それをドキュメントready()関数でラップする必要があります。

<body>
    ...
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            ...
        });
    </script>
</body>
9
James Donnelly

問題が解決したかどうかはわかりませんが、アニメーション機能を使用してシェイク機能を複製する方法を見つけました。これは魅力のように機能します。

function shake() {
        var div = document.getElementById('yourElementID');
        var interval = 100;
        var distance = 10;
        var times = 4;

        $(div).css('position', 'relative');

        for (var iter = 0; iter < (times + 1) ; iter++) {
            $(div).animate({
                left: ((iter % 2 == 0 ? distance : distance * -1))
            }, interval);
        }                                                                                                          
        $(div).animate({ left: 0 }, interval);
    }

このソリューションは thisSite に属しており、すべてのクレジットがあります。これが将来誰かに役立つことを願っています。もしそうなら、それを解決策、挨拶としてマークしてください。

4
JCO9

JQueryだけでなくjQueryUIを追加します。 jQueryにはeffect()関数が含まれていません: https://code.jquery.com/ui

私の場合、私のプロジェクトでは、effectsプラグインを除外するように設定されたJquery-UIの「カスタムダウンロード」バージョンを使用していることがわかりました。私のバージョンのJqueryUIをフルバージョンに置き換えると、問題が修正されました。

0
Wesley Smith

使用してみてください

$(document).ready(function () {
    $('div.step').removeClass('active');
    $("div.step").effect('slide', {direction: 'right', mode: 'hide'}, 500);
    $('#step' + step + '').addClass('active');
    $('#step' + step + '').effect('slide', {direction: 'right', mode: 'show'}, 500);
}
0