插件:Kwicks for Jquery与Jquery 1.2.6完美兼容，但不适用于1.4.2 [英] Plugin: Kwicks for Jquery works perfectly with Jquery 1.2.6 but not 1.4.2
问题描述
这是关于(类似mootools的)kwicks Jquery插件的: http://www.jeremymartin.name/projects.php?project=kwicks
This is about the (mootools-like) kwicks Jquery plugin: http://www.jeremymartin.name/projects.php?project=kwicks
我和这里的这个人有同样的问题 jquery kwicks问题(jquery的kwick在测试站点，但不在现场站点上)，但就我而言，我知道问题出在哪里，我还找不到答案，并且Kwicks插件不再处于活跃开发中.
I have the same problem as this guy here jquery kwicks issue (kwicks for jquery works fine on test site but not on live site) but in my case I know what the problem is, I only can't find an answer yet, and the Kwicks plugin is no longer under active development.
我相信问题出在Jquery版本上. 此插件在1.2.6上可正常使用，但在1.4.2上将无法正常工作.我尝试检查该插件的代码，但我不知道如何将其升级到1.4.2兼容jQuery.
I believe the problem is with the Jquery version. This plugin works great with 1.2.6 but on 1.4.2 it just wont work. I have tried to check the code for the plugin but I don't know how to upgrade it to be 1.4.2 Jquery compatible.
我从没使用过1.2.6，所以我不知道需要做些什么才能使它在1.4.2下工作.
I have never used 1.2.6 so I don't know what I need to change to make this work for 1.4.2.
请帮助.谢谢！
P.S>请在下面找到该插件的源代码(兼容Jquery 1.2.6).
P.S> Please find below the source code for the plugin (Jquery 1.2.6 compatible).
(function($){
$.fn.kwicks = function(options) {
var defaults = {
isVertical: false,
sticky: false,
defaultKwick: 0,
event: 'mouseover',
spacing: 0,
duration: 500
};
var o = $.extend(defaults, options);
var WoH = (o.isVertical ? 'height' : 'width'); // WoH = Width or Height
var LoT = (o.isVertical ? 'top' : 'left'); // LoT = Left or Top
return this.each(function() {
container = $(this);
var kwicks = container.children('li');
var normWoH = kwicks.eq(0).css(WoH).replace(/px/,''); // normWoH = Normal Width or Height
if(!o.max) {
o.max = (normWoH * kwicks.size()) - (o.min * (kwicks.size() - 1));
} else {
o.min = ((normWoH * kwicks.size()) - o.max) / (kwicks.size() - 1);
}
// set width of container ul
if(o.isVertical) {
container.css({
width : kwicks.eq(0).css('width'),
height : (normWoH * kwicks.size()) + (o.spacing * (kwicks.size() - 1)) + 'px'
});
} else {
container.css({
width : (normWoH * kwicks.size()) + (o.spacing * (kwicks.size() - 1)) + 'px',
height : kwicks.eq(0).css('height')
});
}
// pre calculate left or top values for all kwicks but the first and last
// i = index of currently hovered kwick, j = index of kwick we're calculating
var preCalcLoTs = []; // preCalcLoTs = pre-calculated Left or Top's
for(i = 0; i < kwicks.size(); i++) {
preCalcLoTs[i] = [];
// don't need to calculate values for first or last kwick
for(j = 1; j < kwicks.size() - 1; j++) {
if(i == j) {
preCalcLoTs[i][j] = o.isVertical ? j * o.min + (j * o.spacing) : j * o.min + (j * o.spacing);
} else {
preCalcLoTs[i][j] = (j <= i ? (j * o.min) : (j-1) * o.min + o.max) + (j * o.spacing);
}
}
}
// loop through all kwick elements
kwicks.each(function(i) {
var kwick = $(this);
// set initial width or height and left or top values
// set first kwick
if(i === 0) {
kwick.css(LoT, '0px');
}
// set last kwick
else if(i == kwicks.size() - 1) {
kwick.css(o.isVertical ? 'bottom' : 'right', '0px');
}
// set all other kwicks
else {
if(o.sticky) {
kwick.css(LoT, preCalcLoTs[o.defaultKwick][i]);
} else {
kwick.css(LoT, (i * normWoH) + (i * o.spacing));
}
}
// correct size in sticky mode
if(o.sticky) {
if(o.defaultKwick == i) {
kwick.css(WoH, o.max + 'px');
kwick.addClass('active');
} else {
kwick.css(WoH, o.min + 'px');
}
}
kwick.css({
margin: 0,
position: 'absolute'
});
kwick.bind(o.event, function() {
// calculate previous width or heights and left or top values
var prevWoHs = []; // prevWoHs = previous Widths or Heights
var prevLoTs = []; // prevLoTs = previous Left or Tops
kwicks.stop().removeClass('active');
for(j = 0; j < kwicks.size(); j++) {
prevWoHs[j] = kwicks.eq(j).css(WoH).replace(/px/, '');
prevLoTs[j] = kwicks.eq(j).css(LoT).replace(/px/, '');
}
var aniObj = {};
aniObj[WoH] = o.max;
var maxDif = o.max - prevWoHs[i];
var prevWoHsMaxDifRatio = prevWoHs[i]/maxDif;
kwick.addClass('active').animate(aniObj, {
step: function(now) {
// calculate animation completeness as percentage
var percentage = maxDif != 0 ? now/maxDif - prevWoHsMaxDifRatio : 1;
// adjsut other elements based on percentage
kwicks.each(function(j) {
if(j != i) {
kwicks.eq(j).css(WoH, prevWoHs[j] - ((prevWoHs[j] - o.min) * percentage) + 'px');
}
if(j > 0 && j < kwicks.size() - 1) { // if not the first or last kwick
kwicks.eq(j).css(LoT, prevLoTs[j] - ((prevLoTs[j] - preCalcLoTs[i][j]) * percentage) + 'px');
}
});
},
duration: o.duration,
easing: o.easing
});
});
});
if(!o.sticky) {
container.bind("mouseleave", function() {
var prevWoHs = [];
var prevLoTs = [];
kwicks.removeClass('active').stop();
for(i = 0; i < kwicks.size(); i++) {
prevWoHs[i] = kwicks.eq(i).css(WoH).replace(/px/, '');
prevLoTs[i] = kwicks.eq(i).css(LoT).replace(/px/, '');
}
var aniObj = {};
aniObj[WoH] = normWoH;
var normDif = normWoH - prevWoHs[0];
kwicks.eq(0).animate(aniObj, {
step: function(now) {
var percentage = normDif != 0 ? (now - prevWoHs[0])/normDif : 1;
for(i = 1; i < kwicks.size(); i++) {
kwicks.eq(i).css(WoH, prevWoHs[i] - ((prevWoHs[i] - normWoH) * percentage) + 'px');
if(i < kwicks.size() - 1) {
kwicks.eq(i).css(LoT, prevLoTs[i] - ((prevLoTs[i] - ((i * normWoH) + (i * o.spacing))) * percentage) + 'px');
}
}
},
duration: o.duration,
easing: o.easing
});
});
}
});
};})(jQuery);
推荐答案
感谢Nick Craver和 http://jsfiddle.net/(请参阅原始帖子的评论)，我发现了问题！我从项目站点下载的压缩版本和最小化版本似乎有问题，因为我现在使用的是解压缩版本，并且效果很好.
Thanks to Nick Craver and http://jsfiddle.net/ (see comment on original post), I found the problem! The packed and minimized version I downloaded from the project site seems to have a problem cos now I'm using the unpacked version and it works perfectly.
下载解压后的版本(或复制代码，如我在上面的OP中粘贴的那样)，您应该一切顺利.然后，如果需要，可以自己打包；-) http://kwicks.googlecode.com /svn/branches/v1.5.1/Kwicks/jquery.kwicks-1.5.1.js
Download the unpacked version (or just copy the code as I have pasted in the OP above) and you should be good to go. Then pack it yourself if you want ;-) http://kwicks.googlecode.com/svn/branches/v1.5.1/Kwicks/jquery.kwicks-1.5.1.js
StackOverflow震撼了！
StackOverflow rocks!
这篇关于插件:Kwicks for Jquery与Jquery 1.2.6完美兼容，但不适用于1.4.2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
