隔离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在代码中的bug：

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

我希望能够使它工作，还有一些关于如何使用萤火虫调试这种事情的一般技巧（我不明白它会产生任何错误，这是问题，所以我不知道它在哪里出错了，但它可能与动画或条件检查有关。）

开放，这是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工作。

注：上面的代码更改（只此答案）固定的位置，在链接的其他答案的代码是什么修复的动画达到那个位置，例如here's a version without the animation，如果你很好奇。