JQuery .toggle和.slideToggle不适用于Safari

时间:2014-03-31 17:08:40

标签: javascript jquery css safari background-image

我试图让一个小图片库为我的一个朋友拍摄3张照片。 它适用于IE8 +,Opera,Firefox和Chrome,但不适用于Safari,我无法弄清楚原因。

所以这里是代码,它与body-tag中的onLoad一起使用。有趣的是,toogle文本在safari上效果很好,但图片根本没有。

JS:

    function refGo() 
{
    var bgCounter = 0;

    var naCounter = 0;



        names = [

        "Heimkino Gewinnspiel",

        "Traumwochenende Gewinnspiel",

        "SG Diana Schondorf"

        ];

        backgrounds = [

        "Referenzen/heimkino.png",

        "Referenzen/traumwe.png",

        "Referenzen/sgdiana.png" 

        ];




    function changeBackground()
    {

    $( " #refText" ).slideToggle( "slow", function() {




        naCounter = (naCounter+1) % names.length;
        jQuery('#refText').text(names[naCounter]);



        });

        $( " #refChange" ).slideToggle( "slow", function() {


        bgCounter = (bgCounter+1) % backgrounds.length;
        $('#refChange').css('background', 'url('+backgrounds[bgCounter]+') no-repeat scroll center center / cover');



        });

    $( " #refChange " ).slideToggle( "slow", function() {







        });

    $( " #refText " ).slideToggle( "slow", function() {





        jQuery('#refText').text(names[naCounter]);


        setTimeout(changeBackground,5000);
        });

    }



    changeBackground();
}

HTML:

    <a href="referenzen.html"><h2 style="float: left; width:400px; margin-top: 15px;">Referenzen</h2>
 <div class="refStartpage">
 <div class="news" id="refChange"> </div>
 <div id="refText"></div>
</div>
</a>

的CSS:

      #refText {
    font-style: italic;

    }

    #refChange {
    float: left;
    height: 200px;
    margin-left: 20px;
    margin-top: 15px;
    width: 380px;
    }

    .refStartpage {
    float: left;
    height:400px;
    width:380px;
    }

如果有人可以帮助我,我真的很难受! 谢谢!

0 个答案:

没有答案