$ .fn。 <new_function> “不是函數” jQuery

Question

編輯：具有更好格式的代碼鏈接： 編輯：通過JSHint的改進而更新的代碼

http://pastebin.com/hkDQfZy1

我試圖通過像這樣使用$ .fn在jQuery對象上創建一個新函數：

$.fn.animateAuto = function(x,y) { }

並通過以下方式調用：

var card = $(id);
.....
var expanderButton = card.find(".dock-bottom");
.....
expanderButton.animateAuto('height', 500);

我得到：

Uncaught TypeError: expanderButton.animateAuto is not a function

我做錯了什么？ $ .cssHooks擴展名可以與$ .fx一起使用。

這是代碼：

var CSS_VIS = 'visibility'
var CSS_VIS_VIS = 'visible';
var CSS_VIS_HID = 'hidden';
var CSS_TEXTBOX_CONTAINER = ".text-box-container";

$.cssHooks['rotate'] = {
get: function (elem, computed, extra) {
    var property = getTransformProperty(elem);
    if (property) {
        return elem.style[property].replace(/.*rotate\((.*)deg\).*/, '$1');
    } else {
        return '';
    }
},
set: function (elem, value) {
    var property = getTransformProperty(elem);
    if (property) {
        value = parseInt(value);
        $(elem).data('rotatation', value);
        if (value == 0) {
            elem.style[property] = '';
        } else {
            elem.style[property] = 'rotate(' + value % 360 + 'deg)';
        }
    } else {
        return '';
    }
}
};
$.fn.animateAuto = function (prop, speed) {
return this.each(function (i, el) {
    el = jQuery(el);
    var element = el.clone().css({ 'height': 'auto' }).appendTo("body");
    var height = element.css("height");
    var width = element.css("width");
    element.remove();

    if (prop === "height") {
        el.animate({ 'height': height }, speed);
    } else if (prop = "width") {
        el.animate({ 'width': width }, speed);
    } else if (prop = "both") {
        el.animate({ 'height': height, 'width:': width }, speed);
    }
});
}
$.fx.step['rotate'] = function (fx) {
$.cssHooks['rotate'].set(fx.elem, fx.now);
};
function getTransformProperty(element) {
var properties = [
    'transform',
    'WebkitTransform',
    'MozTransform',
    'msTransform',
    'OTransform'];
var p;
while (p = properties.shift()) {
    if (element.style[p] !== undefined) {
        return p;
    }
}
return false;
}
function isExpanded(card) {
return card.find(CSS_TEXTBOX_CONTAINER).css(CSS_VIS) == CSS_VIS_VIS;
}

function expandCard(id) {
var card = $(id);
var isCardExpanded = isExpanded(card);
var expanderButton = card.find(".dock-bottom");
card.animate({
    height: isCardExpanded ? '80px' : '270px'
}, 500);

var startValue = isCardExpanded ? 1 : 0;
var endValue = isCardExpanded ? 0 : 1;
var visibilityValue = isCardExpanded ? CSS_VIS_HID : CSS_VIS_VIS;
var textBoxes = card.find(CSS_TEXTBOX_CONTAINER);
textBoxes.fadeTo(0, startValue);
textBoxes.css(CSS_VIS, visibilityValue).fadeTo(500, endValue);

var topValue = isCardExpanded ? 'auto' : '200px';
if (isCardExpanded) {
    expanderButton.animateAuto('height', 500);
} else {
    expanderButton.animate({
        top: '200px'
    }, 500);
}

expanderButton.find("span").text(isCardExpanded ? "More Info" : "Less Info");

var buttonthing = expanderButton.find("button");
expanderButton.find("button").animate({ rotate: isCardExpanded ? 0 : -180 });
};

Answer 1

問題是jQuery已多次加載。 我正在使用ASP.NET MVC5，並在PartialView（可重復使用的UI控件）和主頁中加載了jQuery，這導致我的擴展名被覆蓋。

我會發布代碼，但是它太冗長，與jQuery或JavaScript無關。 為了解決這個問題，我要做的就是從PartialView中刪除jQuery腳本導入，因為jQuery是由母版頁在每個頁面上導入的。

不過，感謝大家的幫助，你們所有人都向我證明了這不是我想過的簡單問題，需要更多的研究。