Question

首先，抱歉我的英语不好（如果是这样），因为我不是母语人士。

目前我正在使用手风琴滑块，类似于此：http://www.scriptocean.com/accordion.html 这个特定滑块的问题是IE7中显示输出错误。

因此我决定使用.animate（）编写自己的轻量级滑块。我想不应该是一个很大的问题。虽然在FF中一切正常，但IE7和IE8不喜欢我或我的代码。

.css（）适用于IE8（不是IE7） .animate（）在其中任何一个都不起作用。

这是我的jquery-code：

$(document).ready(function(){

var th1 = '#home_slider div#slidimg_1';
var th2 = '#home_slider div#slidimg_2';
var th3 = '#home_slider div#slidimg_3';
var th4 = '#home_slider div#slidimg_4';
var th5 = '#home_slider div#slidimg_5';

var a1 = '#home_slider div#slidbg_1 a';
var a2 = '#home_slider div#slidbg_2 a';
var a3 = '#home_slider div#slidbg_3 a';
var a4 = '#home_slider div#slidbg_4 a';
var a5 = '#home_slider div#slidbg_5 a';

var i = 0;

    $(th1).hover(function(){
            $('.slidtxt#slidtxt_1').css('display','block');
            $(th1).stop().animate({'left':'0px;'}, 500);
            $(a1).stop().animate({'width':'524px'}, 500);
            $(th2).stop().animate({'left':'524px'}, 500);
            $(a2).stop().animate({'width':'87px'}, 500);
            $(th3).stop().animate({'left':'611px'}, 500);
            $(a3).stop().animate({'width':'87px'}, 500);
            $(th4).stop().animate({'left':'695px'}, 500);
            $(a4).stop().animate({'width':'87px'}, 500);
            $(th5).stop().animate({'left':'782px'}, 500);
            $(a5).stop().animate({'width':'100px'}, 500);
        }, function(){
            $('.slidtxt#slidtxt_1').css('display','none');
            $(th1).stop().animate({'left':'0px;'}, 500);
            $(a1).stop().animate({'width':'174px'}, 500);
            $(th2).stop().animate({'left':'174px'}, 500);
            $(a2).stop().animate({'width':'174px'}, 500);
            $(th3).stop().animate({'left':'348px'}, 500);
            $(a3).stop().animate({'width':'174px'}, 500);
            $(th4).stop().animate({'left':'522px'}, 500);
            $(a4).stop().animate({'width':'174px'}, 500);
            $(th5).stop().animate({'left':'696px'}, 500);
            $(a5).stop().animate({'width':'178px'}, 500);
    });
    $(th2).hover(function(){
            $(th1).stop().animate({'left':'0px;'}, 500);
            $(a1).stop().animate({'width':'87px'}, 500);
            $(th2).stop().animate({'left':'87px'}, 500);
            $(a2).stop().animate({'width':'524px'}, 500);
            $(th3).stop().animate({'left':'611px'}, 500);
            $(a3).stop().animate({'width':'87px'}, 500);
            $(th4).stop().animate({'left':'695px'}, 500);
            $(a4).stop().animate({'width':'87px'}, 500);
            $(th5).stop().animate({'left':'782px'}, 500);
            $(a5).stop().animate({'width':'100px'}, 500);
        }, function(){
            $(th1).stop().animate({'left':'0px;'}, 500);
            $(a1).stop().animate({'width':'174px'}, 500);
            $(th2).stop().animate({'left':'174px'}, 500);
            $(a2).stop().animate({'width':'174px'}, 500);
            $(th3).stop().animate({'left':'348px'}, 500);
            $(a3).stop().animate({'width':'174px'}, 500);
            $(th4).stop().animate({'left':'522px'}, 500);
            $(a4).stop().animate({'width':'174px'}, 500);
            $(th5).stop().animate({'left':'696px'}, 500);
            $(a5).stop().animate({'width':'178px'}, 500);
    });
    //... here follow 3 more blocks ( th3 - th5 .hover()), but i thought i wont bother you with those ;-)

它已经在FF中工作了，不是在IE中。为了更好地评估问题，HTML和CSS也是如此：

<div id="home_slider">
        <div id="slidimg_1" style="background:#666;position:absolute;>
                <a href="/index.php?id=53">
                    <img src="images/bild1_wohngebiete.jpg" alt="" />
                    <span class="slidtxt" id="slidtxt_1" style="display: none;"><h2>Wohngebiete</h2></span>
                </a>    
        </div>
        <div id="slidimg_2" style="background:#666;position:absolute;left:175px;padding-left:1px;">
                <a href="/index.php?id=28">
                    <img src="images/bild2_wohnungsangebote.jpg" alt="" />
                    <span class="slidtxt" id="slidtxt_2" style="display: none;"><h2>Wohnungsangebote</h2></span>
                </a>
        </div>
        <div id="slidimg_3" style="background:#666;width:174px;position:absolute;left:350px;padding-left:1px;">
                <a href="/index.php?id=29">
                    <img src="images/bild3_mietplus_angebote.jpg" alt="" />
                    <span class="slidtxt" id="slidtxt_3" style="display: none;"><h2>Mietplus Angebote</h2></span>
                </a>
        </div>
        <div id="slidimg_4" style="background:#666;width:174px;position:absolute;left:525px;padding-left:1px;">
                <a href="/index.php?id=30">
                    <img src="images/bild4_wir_stellen_uns_vor.jpg" alt="" />
                    <span class="slidtxt" id="slidtxt_4" style="display: none;"><h2>Wir stellen uns vor</h2></span>
                </a>
        </div>
        <div id="slidimg_5" style="background:#666;width:174px;position:absolute;left:700px;padding-left:1px;">
                <a href="/index.php?id=31" class="last-child">
                    <img src="images/bild5_mitgliedschaft.jpg" alt="" />
                    <span class="slidtxt" id="slidtxt_5" style="display: none;"><h2>Mitgliedschaft</h2></span>
                </a>
        </div>
    </div>

// CSS部分：直接从外部css文件中获取！

    #home_slider{
    position: relative;
    overflow: hidden;
    background: #666;
    height: 577px;
    width: 874px;
    display: inline-block;
 }
 #home_slider span.slidtxt{
    position: absolute;
    bottom: 40px;
    background: #ffe200;
    width: 524px;
    height: 50px;
    text-align: center;
 }
 #home_slider span.slidtxt h2{
    font-family: Verdana;
    font-size: 13pt;
    color: #666;
 }

希望你有一些想法。因为这个问题，我快要生气了。

期待您的回复：）

亲切的问候。

Answer 1

伊克！请到这里使用：http://docs.jquery.com/UI/Accordion

jquery .animate（）关于动画css属性left和width的问题

1 个答案: