jQuery 动画 IE7

Question

我无法解决 IE7 的一个大问题。一个问题是 overflow:hidden，已经阅读了一些有关它的内容，但就是无法让它工作。

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:总是为溢出的元素设置一个“位置”!

---

编辑

关于 IE 问题，你必须同时处理 left 和 margin-left 位置:

jsBin example

(点击保存-下载并在IE中测试) (P.S:您仍然需要修复 a 标签的 CSS。但困难的事情现在已经过去了:))

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
    });
}