编辑:具有更好格式的代码链接: 编辑:通过 JSHint 的改进更新代码
我正在尝试使用 $.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 });
};
最佳答案
问题是 jQuery 被加载了多次。我正在使用 ASP.NET MVC5,并在 PartialView(可重用 UI 控件)和主页中加载 jQuery,这导致我的扩展被覆盖。
我会发布代码,但它太冗长了,而且与 jQuery 或 JavaScript 无关。为了解决这个问题,我所做的就是从 PartialView 中删除 jQuery 脚本导入,因为 jQuery 是由母版页导入到每个页面上的。
感谢大家的帮助,你们都向我证明,这不是一个我想太多的简单问题,需要更多的研究。
关于javascript - $.fn.<新函数> 'is not a function' jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31946832/