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），因此动画引擎无法正确处理它。绕过这个的最简单方法是挂钩jQuery中可用的动画/ CSS钩子，你可以在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工作。

注意：上面的代码更改（仅在此答案中）修复了位置，链接的其他答案中的代码修复了动画到达该位置，例如{{3}如果你很好奇的话。

隔离jQuery FF4问题

1 个答案: