JQuery анимация IE7

Question

У меня огромная проблема с IE7, которую мне не удается решить. Одной из проблем является переполнение: скрыто, я читал об этом, но просто не могу заставить его работать.

http://jsfiddle.net/39bhW/3/

У кого-нибудь есть совет, как это решить?

---

CSS:

#items {
    display: inline;
    position:relative;
    margin: 0;
    padding: 0;
}
#items li {
    float: left;
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
}
#items .itemplaceholder {
    height:200px;
    width:160px;
    text-align: center;
    position: relative;
}
.placeholder {
    width:640px;
    height:200px;
    overflow: hidden;
}
.content {
    width:800px;
    height:240px;
}
#items .itemplaceholder p {
    position: absolute;
    bottom: 5px;
    width: 100%;
    height: 50%;
}
#items .itemplaceholder p a {
    position: absolute;
    display: block;
    bottom: 0;
    text-align: center;
    width: 100%;
}

HTML:

<div class="placeholder">
        <div class="content">
        <ul id="items">
            <li>
                <div class="itemplaceholder">
                <img src="http://www.els.qut.edu.au/blendedlearning/blackboard/graphics/test_on.gif"/>
                    <p>
                        Test title<br/>
                        Description A
                        <a href="#">Link</a>
                    </p>
                </div>
            </li>
            <li>
                <div class="itemplaceholder">
                    <span>
                <img src="http://www.aja.com/images/software/AJA_TestIconNEW.png"/>
                    <p>
                        Little bit longer title for test<br/>
                        Another description that is longer
                        <a href="#">Link</a>
                    </p>
                    </span>
                </div>
            </li>
            <li>
                <div class="itemplaceholder">
                    <img src="http://ce.byu.edu/cw/testprep/images/testDrive.jpg"/>
                    <p>
                        Title 3<br/>
                        Lorem ipsum
                    <a href="#">Link</a>
                    </p>
                </div>
            </li>
            <li>
                <div class="itemplaceholder">
                    <img src="http://www.els.qut.edu.au/blendedlearning/blackboard/graphics/test_on.gif"/>
                    <p>
                        Title<br/>
                        Text
                        <a href="#">Link</a>
                    </p>
                </div>
            </li>
            <li>
                <div class="itemplaceholder">
                    <img src="http://ce.byu.edu/cw/testprep/images/testDrive.jpg"/>
                    <p>
                        Title title title<br/>
                        Lorem ipsum
                        <a href="#">Link</a>
                    </p>
                </div>
            </li>
            <li>
                <div class="itemplaceholder">
                    Item F
                </div>
            </li>
        </ul>
        </div>
    </div>

    <a href="#" id="prev">Prev</a>
    <a href="#" id="next">Next</a>

JQ:

function next() {
    $menu = $('#items');
    $first = $menu.find("li").first();
    unbindClick();


    $first.animate({
        marginLeft: -1 * $first.width()
    }, {
        duration: 600,
        queue: false,
        complete: function() {
            $menu.append($first);
            $first.css('marginLeft', '');
            bindClick();
        }
    });
}

function prev() {
    $menu = $('#items');
    $first = $menu.find("li").first();
    $last = $menu.find("li").last();
    $menu.prepend($last);

    var width = $last.width();
    $last.css('marginLeft', -1 * width + "px");
    $menu.prepend($last);
    unbindClick();

    $last.animate({
        marginLeft: 0
    }, {
        duration: 600,
        queue: false,
        complete: bindClick
    });
}

function unbindClick() {
    $("#next").unbind('click');
    $("#prev").unbind('click');
}

function bindClick() {
    $("#next").click(next);
    $("#prev").click(prev);
}

$("#next").click(next);
$("#prev").click(prev);

Answer 1

Добавьте position:relative к элементу, который нуждается в переполнении:
в вашем примере это элемент .placeholder

.placeholder {
    position:relative;
    width:640px;
    height:200px;
    overflow: hidden;
}

P.S: ВСЕГДА устанавливайте 'позицию' для переполненных элементов!

---

EDIT

Что касается проблемы IE, вы должны одновременно обрабатывать позиции left и margin-left:

Пример jsBin

(нажмите на save-download и протестируйте в IE) (П.С .: Вам все равно придется исправлять CSS ваших тегов a. Но сейчас самое сложное :))

function next() {
    $menu = $('#items');
    $first = $menu.find("li").first();
    unbindClick();

    var firstW = $first.width(); // added

    if ($.browser.msie && $.browser.version < 8.0) { // added
        $first.animate({left: -firstW},600);
    }   

    $first.animate({
        marginLeft : -firstW // changed
    }, {
        duration: 600,
        queue: false,
        complete: function() {
            $menu.append($first);
            $first.css({marginLeft:0, left: 0}); // added left: 0
            bindClick();
        }
    });
}

function prev() {
    $menu = $('#items');
    $first = $menu.find("li").first();
    $last = $menu.find("li").last();
    //$menu.prepend($last); // removed

    var lastW = $last.width();

    if ($.browser.msie && $.browser.version < 8.0) { // added
        $last.css({left: -lastW});
    }       

    $last.css({marginLeft: -lastW});
    $menu.prepend($last);
    unbindClick();

    $last.animate({
        marginLeft: 0,
        left:0              // added
    }, {
        duration: 600,
        queue: false,
        complete: bindClick
    });
}