Question

我们有一个JQuery函数可以控制一系列绝对定位的面板，这些面板可以从左侧滑入和滑出彼此的顶部。最初这是由webkit使用JQuery add/removeClass控制的。为了获得更好的兼容性，我们现在使用JQuery来使用webkit。

问题是选项卡面板应该从left:-560px; JQuery接缝开始忽略CSS中的那个，所以我在JQuery中写了一行，将它移动到那里。它也失败了，但实际的功能正在发挥作用。问题是所有面板都从left:0px;

开始

var tabbarpan;
        // THIS LINE SHOULD MOVE ALL PANELS TO left:-560px; BUT IT DOESN'T //
    $('#coursepack .corecol .chamber').css('left','-560');

    // NAVIGATION //
    $('#coursepack .tabbar a').click(function(){
        $('#coursepack .tabbar a').removeClass('active');
        $(this).addClass('active');

        $('#' + tabbarpan).animate({left:'-560', opacity:0.6, leaveTransforms:true},750);

        tabbarpan = $(this).attr('rel');
        $('#' + tabbarpan).animate({left:'+0', opacity:1, leaveTransforms:true},750);

        $('#coursepack .review').removeClass('open');
        $('#coursepack .corecol .extention').animate({left:'=180px', opacity:0},{ duration: 500 });

        return false
    });

任何想法为什么？

非凡

Answer 1

$('#coursepack .corecol .chamber').css('left','-560');

你错过了该行的px，应该是

$('#coursepack .corecol .chamber').css('left','-560px');

Answer 2

你应该使用左边的“px”，如： -

.css('left','-560');
to
.css('left','-560px');

Answer 3

问题是由于插件用于增强JQuery动画以尽可能使用CSS3。

这个插件而不是在左边使用过渡，使用的是翻译x，y。因此，在旧的浏览器上，这是完美的，而现代的则不是。对代码的一个小的修改已经解决了强制动画的问题，因此不是通过CSS开始移动面板，而是使用动画移动它，因此它将被CSS3翻译为现代浏览器。

var tabbarpan; $（'＃coursepack .corecol .chamber'）。animate（{left：' - 560px'，opacity：0.6，leaveTransforms：true}，100）;

// NAVIGATION //
$('#coursepack .tabbar a').click(function(){
    $('#coursepack .tabbar a').removeClass('active');
    $(this).addClass('active');

 //ANIMATION FIRST FORCES TRANSLATE FOR CSS3 BROWSERS //
    $('#' + tabbarpan).animate({left:'-560px', opacity:0.6, leaveTransforms:true},750);

    tabbarpan = $(this).attr('rel');
    $('#' + tabbarpan).animate({left:'+0px', opacity:1, leaveTransforms:true},750);

    $('#coursepack .review').removeClass('open');
    $('#coursepack .corecol .extention').animate({left:'=180px', opacity:0},{ duration: 500 });

    return false
});

非凡

JQuery CSS / Animate函数在左侧绝对定位时失败

3 个答案: