jQueryTransition仅适用于Chrome-jQueryTransitiononlyworksonChrome

First of all, I'm totally new to jQuery (I'm more a desktop app developer)

首先,我对jQuery完全不熟悉(我更像是桌面应用开发者)

I'm trying to build my first jQuery code, which consists of a "sliding" transition effect between 3 DIV.

我正在尝试构建我的第一个jQuery代码,它包含3 DIV之间的“滑动”过渡效果。

I can't figure out why it only works on Chrome, and not on FF or IE. Neither the first one nor the second one wants to move or to hide.

我无法弄清楚为什么它只适用于Chrome,而不适用于FF或IE。第一个和第二个都不想移动或隐藏。

Any help on this one will be greatly appreciated, thanks by advance !

任何有关这一方面的帮助将非常感谢,谢谢提前!

here is my current code :

这是我目前的代码:

jQuery :

$(function () {

    var cOntentWidth= '-' + ($('.content').width() + 1000) + 'px';

    $('.content').css({
        position: 'absolute',
        left: contentWidth
    });    

    $('#ligne1')
        .animate({ left: 100 },"fast")
        .addClass('visible');

    $("a.temp").click(function () {
        event.preventDefault();
        var $blockID = $( $(this).attr('href') );
        if ($blockID.hasClass('visible')) { return; }
        $('.content.visible')
            .removeClass('visible')
            .animate( { left: $(window).width() }, function () {
                $(this).css('left', contentWidth);
            });
        $blockID
            .addClass('visible')
            .animate({ left: 100 }, 1000);
    });
});

Here is my CSS :

这是我的CSS:

.wrapper { position: relative;}
.content { width: 900px; height: 300px; padding: 0; left: 0; top: 0; }
.box { width: 900px; height: 300px; }
#ligne1 .box { background: green; }
#ligne2 .box { background: yellow; }
#ligne3 .box { background: red; }

And finally here is my HTML :

最后这是我的HTML:

One
Two
Three

    

        

    
    

        

    
    

        

    

1 个解决方案

$("a.temp").click(function (event) {...}