javascript - jQuery 显示隐藏元素 - 在 ie7 中跳转

Question

我正在尝试制作一个简单的幻灯片，但我在使用 Internet Explorer 7 时遇到了一些困难。

默认情况下导航是隐藏的，以防用户没有 js。如果它们滑动，那么一个箭头将淡入淡出，这在除 ie7 之外的所有浏览器中都能完美运行。在 ie7 中，整个幻灯片向下跳了几个像素 - 我相信这与显示有关:没有设置然后在淡入时改变但我不太明白。

HTML:

<div class="wrap">

        <nav class="home-slideshow">
            <a href="#" onclick="return false"><img src="img/arrow-left.gif" class="arrow-left" height="22" width="13"></a>
            <a href="#" onclick="return false"><img src="img/arrow-right.gif" class="arrow-right" height="22" width="13"></a>
        </nav>

        <ul class="home-slideshow">
            <li>
                <a href="#"><img src="img/slide.jpg" alt="slide" title="slide" height="302" width="960"></a>
            </li>
            <li>
                <a href="#"><img src="img/slide.jpg" alt="slide" title="slide" height="302" width="960"></a>
            </li>
            <li>
                <a href="#"><img src="img/slide.jpg" alt="slide" title="slide" height="302" width="960"></a>
            </li>
        </ul>

    </div> <!-- end wrap -->

JS:

// home feature slideshow

    // add navigation
    $('.arrow-right').show();

    // navigation
    $('.arrow-right').on('click', (function() {

        if ($(':animated').length) {
            return false;
        }

        ul = $('ul.home-slideshow');

        noOfSlides = 3;
        width = noOfSlides * 960;
        lastSlide = width - 960;
        currentPos = parseInt(ul.css('margin-left'));

        ul.css('width', width);

        ul.animate({
            "margin-left": currentPos - 960
        }, 1500, "easeInOutQuint", function() {

            if (ul.css('margin-left') == '-' + lastSlide + 'px') {
                $('.arrow-right').fadeOut();
            } else {
                $('.arrow-left').fadeIn();
            } // end if

        }); // end animate

    })); // end arrow-right click

    $('.arrow-left').on('click', (function() {

        if ($(':animated').length) {
            return false;
        }

        ul = $('ul.home-slideshow');

        noOfSlides = 3;
        width = noOfSlides * 960;
        lastSlide = width + 960;
        currentPos = parseInt($(ul).css('margin-left'));

        ul.css('width', width);

        ul.animate({
            "margin-left": currentPos + 960
        }, 1500, "easeInOutQuint", function() {

            if (ul.css('margin-left') == '0px') {
                $('.arrow-left').fadeOut();
            } else {
                $('.arrow-right').fadeIn();
            } // end if

        }); // end animate

    })); // end arrow-left click

CSS:

/* Feature Slideshow */
ul.home-slideshow {
    height: 302px;
    overflow: hidden;
}

    ul.home-slideshow li {
        float: left;
    }

    /* Navigation */
    nav.home-slideshow {
        position: relative;
        width: 960px;
    }

    .arrow-left, .arrow-right {
        background: #003592;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        display: none;
        height: 22px;
        padding: 6px;
        top: 126px;
        position: absolute;
        width: 13px;
        z-index: 1;
    }
        .arrow-right {
            right: 0px;
        }
        .arrow-left {
            left: 0px;
        }

有人可以建议解决这个问题吗？

Answer 1

可能是这样的:(虽然一切看起来都很完美)

尝试将 Ul home-slideshow 向上移动并将 nav 移动到其下方，看看是否可行:

<div class="wrap">

    <ul class="home-slideshow">
        <li>
            <a href="#"><img src="img/slide.jpg" alt="slide" title="slide" height="302" width="960"></a>
        </li>
        <li>
            <a href="#"><img src="img/slide.jpg" alt="slide" title="slide" height="302" width="960"></a>
        </li>
        <li>
            <a href="#"><img src="img/slide.jpg" alt="slide" title="slide" height="302" width="960"></a>
        </li>
    </ul>

    <nav class="home-slideshow">
        <a href="#" onclick="return false"><img src="img/arrow-left.gif" class="arrow-left" height="22" width="13"></a>
        <a href="#" onclick="return false"><img src="img/arrow-right.gif" class="arrow-right" height="22" width="13"></a>
    </nav>

</div> <!-- end wrap -->