jQuery脚本兼容性问题

Question

我是jQuery的新手，我遇到了一个我目前无法解决的问题--我集成了两个脚本(jquery supersized和highlightfade)- -不幸的是，我似乎遇到了让它们正常工作的问题。只要我移除第一部分(超大尺寸)，另一个插件似乎就可以正常运行了。问题出在哪里？如果能得到一些帮助，我们将不胜感激。

// jQuery supersized
jQuery(function ($) {
    $.supersized({
        slideshow: 1,
        autoplay: 1,
        start_slide: 1,
        random: 0,
        slide_interval: 4000,
        transition: 1,
        transition_speed: 1500,
        new_window: 1,
        pause_hover: 0,
        keyboard_nav: 1,
        performance: 1,
        image_protect: 1,
        image_path: 'img/',
        min_width: 0,
        min_height: 0,
        vertical_center: 1,
        horizontal_center: 1,
        fit_portrait: 1,
        fit_landscape: 0,
        navigation: 1,
        thumbnail_navigation: 1,
        slide_counter: 1,
        slide_captions: 1,
        slides: [{
            image: 'images/slides/1.jpg'
        }, {
            image: 'images/slides/2.jpg'
        }, {
            image: 'images/slides/3.jpg'
        }, {
            image: 'images/slides/4.jpg'
        }]
    });
});

和

// jQuery Plugin highlightFade (jquery.offput.ca/highlightFade)
jQuery.fn.highlightFade = function (settings) {
    var o = (settings && settings.constructor == String) ? {
        start: settings
    } : settings || {};
    var d = jQuery.highlightFade.defaults;
    var i = o['interval'] || d['interval'];
    var a = o['attr'] || d['attr'];
    var ts = {
        'linear': function (s, e, t, c) {
            return parseInt(s + (c / t) * (e - s))
        },
        'sinusoidal': function (s, e, t, c) {
            return parseInt(s + Math.sin(((c / t) * 90) * (Math.PI / 180)) * (e - s))
        },
        'exponential': function (s, e, t, c) {
            return parseInt(s + (Math.pow(c / t, 2)) * (e - s))
        }
    };
    var t = (o['iterator'] && o['iterator'].constructor == Function) ? o['iterator'] : ts[o['iterator']] || ts[d['iterator']] || ts['linear'];
    if (d['iterator'] && d['iterator'].constructor == Function) t = d['iterator'];
    return this.each(function () {
        if (!this.highlighting) this.highlighting = {};
        var e = (this.highlighting[a]) ? this.highlighting[a].end : jQuery.highlightFade.getBaseValue(this, a) || [255, 255, 255];
        var c = jQuery.highlightFade.getRGB(o['start'] || o['colour'] || o['color'] || d['start'] || [255, 255, 128]);
        var s = jQuery.speed(o['speed'] || d['speed']);
        var r = o['final'] || (this.highlighting[a] && this.highlighting[a].orig) ? this.highlighting[a].orig : jQuery.curCSS(this, a);
        if (o['end'] || d['end']) r = jQuery.highlightFade.asRGBString(e = jQuery.highlightFade.getRGB(o['end'] || d['end']));
        if (typeof o['final'] != 'undefined') r = o['final'];
        if (this.highlighting[a] && this.highlighting[a].timer) window.clearInterval(this.highlighting[a].timer);
        this.highlighting[a] = {
            steps: ((s.duration) / i),
            interval: i,
            currentStep: 0,
            start: c,
            end: e,
            orig: r,
            attr: a
        };
        jQuery.highlightFade(this, a, o['complete'], t)
    })
};
jQuery.highlightFade = function (e, a, o, t) {
    e.highlighting[a].timer = window.setInterval(function () {
        var newR = t(e.highlighting[a].start[0], e.highlighting[a].end[0], e.highlighting[a].steps, e.highlighting[a].currentStep);
        var newG = t(e.highlighting[a].start[1], e.highlighting[a].end[1], e.highlighting[a].steps, e.highlighting[a].currentStep);
        var newB = t(e.highlighting[a].start[2], e.highlighting[a].end[2], e.highlighting[a].steps, e.highlighting[a].currentStep);
        jQuery(e).css(a, jQuery.highlightFade.asRGBString([newR, newG, newB]));
        if (e.highlighting[a].currentStep++ >= e.highlighting[a].steps) {
            jQuery(e).css(a, e.highlighting[a].orig || '');
            window.clearInterval(e.highlighting[a].timer);
            e.highlighting[a] = null;
            if (o && o.constructor == Function) o.call(e)
        }
    }, e.highlighting[a].interval)
};
jQuery.highlightFade.defaults = {
    start: [255, 255, 128],
    interval: 50,
    speed: 400,
    attr: 'backgroundColor'
};
jQuery.highlightFade.getRGB = function (c, d) {
    var result;
    if (c && c.constructor == Array && c.length == 3) return c;
    if (result = /rgb(s*([0-9]{1,3})s*,s*([0-9]{1,3})s*,s*([0-9]{1,3})s*)/.exec(c)) return [parseInt(result[1]), parseInt(result[2]), parseInt(result[3])];
    else if (result = /rgb(s*([0-9]+(?:.[0-9]+)?)%s*,s*([0-9]+(?:.[0-9]+)?)%s*,s*([0-9]+(?:.[0-9]+)?)%s*)/.exec(c)) return [parseFloat(result[1]) * 2.55, parseFloat(result[2]) * 2.55, parseFloat(result[3]) * 2.55];
    else if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(c)) return [parseInt("0x" + result[1]), parseInt("0x" + result[2]), parseInt("0x" + result[3])];
    else if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(c)) return [parseInt("0x" + result[1] + result[1]), parseInt("0x" + result[2] + result[2]), parseInt("0x" + result[3] + result[3])];
    else return jQuery.highlightFade.checkColorName(c) || d || null
};
jQuery.highlightFade.asRGBString = function (a) {
    return "rgb(" + a.join(",") + ")"
};
jQuery.highlightFade.getBaseValue = function (e, a, b) {
    var s, t;
    b = b || false;
    t = a = a || jQuery.highlightFade.defaults['attr'];
    do {
        s = jQuery(e).css(t || 'backgroundColor');
        if ((s != '' && s != 'transparent') || (e.tagName.toLowerCase() == "body") || (!b && e.highlighting && e.highlighting[a] && e.highlighting[a].end)) break;
        t = false
    } while (e = e.parentNode);
    if (!b && e.highlighting && e.highlighting[a] && e.highlighting[a].end) s = e.highlighting[a].end;
    if (s == undefined || s == '' || s == 'transparent') s = [255, 255, 255];
    return jQuery.highlightFade.getRGB(s)
};
jQuery.highlightFade.checkColorName = function (c) {
    if (!c) return null;
    switch (c.replace(/^s*|s*$/g, '').toLowerCase()) {
    case 'aqua':
        return [0, 255, 255];
    case 'black':
        return [0, 0, 0];
    case 'blue':
        return [0, 0, 255];
    case 'fuchsia':
        return [255, 0, 255];
    case 'gray':
        return [128, 128, 128];
    case 'green':
        return [0, 128, 0];
    case 'lime':
        return [0, 255, 0];
    case 'maroon':
        return [128, 0, 0];
    case 'navy':
        return [0, 0, 128];
    case 'olive':
        return [128, 128, 0];
    case 'purple':
        return [128, 0, 128];
    case 'red':
        return [255, 0, 0];
    case 'silver':
        return [192, 192, 192];
    case 'teal':
        return [0, 128, 128];
    case 'white':
        return [255, 255, 255];
    case 'yellow':
        return [255, 255, 0]
    }
};

Answer 1

问题出在highlightFade插件上。你不需要那个。请浏览一下URL，看看插件的创建者有什么要说的

耶！这个插件终于被淘汰了。在漫长而漫长的1.1版本之后，jQuery 1.2终于问世了，并随之而来的是effect系统的升级。特别是，它现在允许自定义动画。John Resig发布了一个官方的jQuery插件和1.2，添加了边框和背景动画，所以现在它比以前工作得更好，并且得到了jQuery团队的全力支持。您可以在jquery插件存储库找到新的官方动画插件的站点。同时，可以在这里找到演示现在未维护的highlightFade插件的旧主页

Link to the site