jquery - 隔离 jQuery FF4 问题

Question

为了响应另一位用户，我已升级 jQuery 插件 iCheckbox 以与 jQuery 1.5 和 1.6(在 Safari 中)配合使用。我的回答对此进行了描述:

jquery 1.4.2 working for iCheckBox and not jquery 1.6

但由于某种原因，它在 FF4 中不起作用，我需要帮助在此处找到的代码中查找影响 FF4 的错误:

http://fiddle.jshell.net/mikkelbreum/HAGMp/

我想要帮助使它工作，以及一些关于如何使用 firebug 调试此类事情的一般提示(我没有让它产生任何错误，这就是问题所在，所以我不知道它在哪里出了问题。但这可能与动画或条件检查有关。)

在 Safari 中打开(可以运行)，在 FF4 中打开(损坏，没有动画发生): http://fiddle.jshell.net/mikkelbreum/HAGMp/show/

我还想知道它是否可以在IE7,8,9下运行？

Answer 1

更新:我更深入地研究了该插件，正在进行大量额外的工作，这是一个更精简的版本，可以执行相同的操作，但工作量更少并且 在 FF4 中工作(没有下面列出的其他答案中的 CSS/动画插件)。

此外，我做了一些调整 - 您现在可以在动画完成之前单击图像将其切换回来，无需等待动画完成来确定状态 - 相反，我们使用复选框的状态(现在也立即受到影响)。 API 是相同的，只是插件的内部发生了变化。

/*
* iCheckbox - Inspired Checkbox v0.1
*
* Convert a checkbox or multiple checkboxes into iphone style switches.
*
* This is based on the jQuery iphoneSwitch plugin by Daniel LaBare.
*
* Features:
*    * Because checkboxes are used, this is compatable with having javascript off for form submission.
*    * Affects only checkboxes.
*    * Synchronizes the actual state of the checkbox for on or off status.
*    * Completely self-contained for each checkbox.
*    * Changes fire the onchange event of your checkbox.
*    * Relies purely on css for styling... no passing anything but your slider image.
*    * Because functionality is decoupled from CSS, you can assign custom CSS classes if you wish making it possible for multiple version per page.
*    * Completely inline like a normal checkbox. No sliding-door-float madness.
*
* iphoneSwitch Author: Daniel LaBare
*    iCheckbox Author: Bryn Mosher
*   iphoneSwitch Date: 2/4/2008
*      iCheckbox date: 2/26/2010-2/27/2010 (like most of you I'm a nite owl :P)
*/

// convert the matched element into an iCheckbox if it is a checkbox input
jQuery.fn.iCheckbox = function(start_state, options) {

    if(this.length == 0 || this[0].type != 'checkbox') return this;

    // define default settings
    var settings = jQuery.extend( {
        // switch_container_src is the outer frame image of the slider
        // you assign the actual slider image via css
        switch_container_src: 'images/iphone_switch_container.gif',
        // The height of your slider
        switch_height: 27,
        // The width of your slider
        switch_width: 94,
        // switch_speed is the speed of the slider animation.
        // Warning: Your onchange() even won't be fired until the end of this!
        switch_speed: 150,
        // How far your actual slider image has to move to change to the "off" state.
        // This can be either positive or negative based on the layout of your image.
        // The "on" state expects this image to have backgroundPosition: 0px.
        switch_swing: -53,
        // CSS class of the container if you wish.
        class_container: 'iCheckbox_container',
        // CSS class of the switch.
        // This should have your actual "on"/"off" image set as its background-image.
        class_switch: 'iCheckbox_switch',
        // CSS class of the checkbox if you wish it shown.
        class_checkbox: 'iCheckbox_checkbox',
        checkbox_hide: true,
        // animate off function
        iCheckToggle: function (elem, atime, animOnly) {
            var img = jQuery(elem).siblings('img');
            atime = typeof(atime) == 'number' ? atime : settings.switch_speed;
            img.stop(true).animate({ backgroundPositionX: (elem.checked ? '0' : settings.switch_swing) + 'px' }, {
                duraton: parseInt(atime) > 0 ? atime : 1,
                easing: 'linear',
                step: function(cur, opt){
                   img.css("background-position", opt.now + "px 0px");
                }
             });
        },
    }, options);

    // set initial state
    this.prop('checked', start_state == 'on');

    // create the switch
    return this.each(function() {
        // make the container
        var container = jQuery(this).wrap($('<span />').addClass(settings.class_container)).parent();
        // make the switch image based on starting state
        jQuery('<img class="'+settings.class_switch+'" src="'+settings.switch_container_src+'" />')
            .appendTo(container);
        // sync the checkbox to initial state
        // must have a positive time for the initial event to fire
        settings.iCheckToggle(this, 1);
        // bind clicking on the image
        jQuery(this).siblings('.'+settings.class_switch).click(function (e) {
            jQuery(this).siblings('input').click();
        }).end()
          // assign the class to it
          .addClass(settings.class_checkbox)
          // finally hide the checkbox after everything else is declared - we do this for syntax checking
          .toggle(!settings.checkbox_hide)
          // bind clicking on a visible checkbox
          .change(function (e) {
            settings.iCheckToggle(this, settings.switch_speed, true );
        });
    });
};

You can test it out here .

<小时/>

原始答案:

背景位置滑动在 Firefox 中有点奇怪，属性以百分比而不是 px ( try your demo here, look at the alert on click in firefox vs. chrome ) 为单位，因此动画引擎无法正确处理它。绕过这个问题的最简单方法是 Hook jQuery 中可用的动画/CSS Hook ，您可以在 this answer 中看到一个工作示例。 .

此外，您还需要更改为标准 backgroundProperty，而不是此处专门的 backgroundPropertyX，如下所示:

.animate({backgroundPosition: settings.switch_swing+'px 0'}, atime, 'linear')

再往下:

.animate({backgroundPosition: '0 0'}, atime, 'linear')

Here's the code from the other answer combined with the above in your demo ，在 FF4 中工作。

注意:上述代码更改(仅在这个答案中)修复了位置，链接的其他答案中的代码是修复动画以到达该位置的代码，例如 here's a version without the animation ，如果你好奇的话。