Исправление скользящей анимации пользовательской карусели

Question

Я даже поделюсь с вами своим кодом!

По сути, у меня есть карусель, которую я построил снизу вверх. Теперь она работает нормально, когда показывается более один продукт.

Когда отображается только один продукт, анимация переходит в IE (неожиданно ...). Кто-нибудь есть и идея, как я мог это исправить?

Мой JQuery для скольжения:

$(leftButton).click(function(){
    var item_width = 205;
    var left_indent = parseInt($('ul#carousel_ul').css('left')) + (item_width);
    var $currElement = $('ul#carousel_ul li:last');
    $($currElement).prependTo('ul#carousel_ul');
    $('ul#carousel_ul').css({'left':-left_indent});

    $('ul#carousel_ul:not(:animated)').animate({'left' : 0},carouselSpeed,function(){       
        $('#carousel_ul').css({'left':0}); //css fix
    }); 
});
$(rightButton).click(function(){ 
    var item_width = 205;
    var position = $('ul#carousel_ul').position();
    var left_indent = parseInt(position.left + item_width);

    $('ul#carousel_ul:not(:animated)').animate({'left' : left_indent},carouselSpeed,function(){
        var $currElement = $('ul#carousel_ul li:first'); 
        if ($.browser.msie) {
            $('ul#carousel_ul').css({'left':'11px'}); 
        } else {
            $('ul#carousel_ul').css({'left':'0px'}); 
        }

        $($currElement).hide().appendTo('ul#carousel_ul');
        $($currElement).show();
    });
    return false; 
});

И мой HTML:

<div id="carousel_inner">
    <ul id="carousel_ul">
        <li name="1"></li>
        <li name="2"></li>
        <li name="3"></li>
        <li name="4"></li>
        <li name="5"></li>
        <li name="6"></li>
        <li name="7"></li>
        <li name="8"></li>
        <li name="9"></li>
    </ul>
</div>

И, наконец, мой CSS:

div#carousel_inner {
    float:left; 
    width:205px;
    height: 125px;
    min-height: 115px;
    margin-left: 25px;
    position: relative;
    overflow: hidden; 
    z-index: 75;
}
ul#carousel_ul {
    position:relative;
    left:0px;
    list-style-type: none; 
    margin: 0 auto;
    padding: 0px;
    width:9999px; /* important */
    height: 115px;
    min-height: 115px;
    bottom: 35px;
    z-index: 75;
}

Answer 1

Попробуйте абсолютную позицию примерно так:

ul#carousel_ul {
    position:absolute;
    left:0;
    list-style-type: none; 
    margin: 0 auto;
    padding: 0;
    width:9999px; /* important */
    height: 115px;
    min-height: 115px;
    bottom: 35px;
    z-index: 75;
}

А где вы написали / * важный * / вы не имели ввиду !important ??ПРИМЕЧАНИЕ. - Теперь ваша карусель может быть неправильной, но, по крайней мере, проверьте, правильно ли она работает с вышеуказанным css ...

Answer 2

Код, который вы использовали для получения значения css left здесь:

var left_indent = parseInt($('ul#carousel_ul').css('left')) + (item_width);

Будет производить что-то вроде 100px, а не 100, так что вы не можете добавить это в свою item_width, потому что это приведет к некоторомуматематика вроде 100px + 300, что неверно.Попробуйте это:

var position = $('ul#carousel_ul').position();
var left_indent = parseInt(position.left + item_width);

position.left вернет левую позицию объекта, а position.top вернет верхнюю позицию.

• Ссылка: http://api.jquery.com/position/

Answer 3

Попробуйте заменить этот кусок кода:

$('ul#carousel_ul:not(:animated)').animate({'left' : 0},carouselSpeed,function(){       
   $('#carousel_ul').css({'left':0}); //css fix
}); 

С этим:

$('ul#carousel_ul').stop().animate({'left' : 0},carouselSpeed,function(){       
   $('#carousel_ul').css({'left':0}); //css fix
});