Question

我有以下jQuery代码：

jQuery(document).ready(function(){

    var list = jQuery('#content-list .mask ul').get(0);
    var mask = jQuery('#content-list .mask').get(0);
    var next = jQuery('#content-list .next').get(0);
    var previous = jQuery('#content-list .previous').get(0);

    var listHeight = parseInt(jQuery('#content-list').first().attr('listheight'));

    var isAnimating = false;
    var duration = 'slow';
    var easing = 'swing';
    var min = Math.floor(jQuery(list).innerHeight()/listHeight)*-listHeight;
    var max = 0;
    var current = 0;

    if(list) {

        jQuery(mask).height(listHeight-20);
        jQuery(previous).addClass('disabled');

        if (current <= min)
            jQuery(next).addClass('disabled');

        jQuery(next).bind('click', function(){
            var elements;
            var callback;
            if(!isAnimating) {

                isAnimating = true;

                current -= listHeight;
                if (current <= min) {
                    current = min;
                    jQuery(this).addClass('disabled');
                }

                if (current < max) {
                    jQuery(previous).removeClass('disabled');
                }

                callback = function() { 
                    isAnimating = false;
                }

                jQuery(list)
                .animate({'margin-top': current+'px'}, duration, easing, callback);
            }

            return false;

        });

        jQuery(previous).bind('click', function(){

            var elements;
            var callback;

            if(!isAnimating) {

                isAnimating = true;
                current += listHeight;

                if (current >= max) {
                    current = max;
                    jQuery(this).addClass('disabled');  
                }

                if (current > min) {
                    jQuery(next).removeClass('disabled');
                }

                callback = function() { 
                    isAnimating = false;
                }

                jQuery(list)
                .animate({'margin-top': current+'px'}, duration, easing, callback);
            }

            return false;

        });

    }

});

它在Firefox中运行良好但在IE7中失败...而不是滚动得很好，它滚动大约应该距离的1/4，并且当我按下“下一步”按钮时事件似乎不会一直触发

我怀疑这与我改变的一些CSS有关，因为此代码之前正在工作......但我不知道从哪里开始。我使用Firequery浏览了每个变量，并且在Firefox中至少它似乎给了我正确的测量值，而“list”这样的项目是我正在寻找的HTML元素......

Answer 1

我确实得到了一些帮助......事实证明我在jQuery中使用的一个选择器缺少IE的“hasLayout”，因此滚动没有正确实现。

对我有用的东西：

使用Javascript警报查看被调用的内容和不是
在IE7中似乎无法正常工作的选择器上尝试“position：relative”
如果你的选择器没有“haveLayout”（应该在IE DEV工具栏中读取hasLayout：-1），那么尝试添加zoom：1

jQuery next / previous按钮在IE7中无法正常工作

1 个答案: