Простой скрипт jQuery не работал в IE - думал, что jQuery был кроссплатформенным! - PullRequest
Новая
       12

Простой скрипт jQuery не работал в IE - думал, что jQuery был кроссплатформенным!

1 голос
/ 04 мая 2011

Может кто-нибудь объяснить, почему следующий скрипт не работает в IE 8. Это очень простая анимация и очень хорошо работает в FF. Я включил CSS js и HTML, как это указано в тестовом файле. 

<style>
    .linkholder{
        display:block;
        float:left;
        position:relative;
        margin:15px;
        overflow:hidden; 
    }

    .linkholder img{
        border:none;
        max-height:200px;
        max-width:150px;
    }

    }
    .bwcover{
        position:absolute;
        left:0;
        top:0;
        display:none;
        }

    .colorlink{
        position:absolute;
        left:0;
        top:0;
    }

</style>
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery(".linkholder").each(function(i){
            var wid = jQuery(this).find(".colorlink").outerWidth();
            jQuery(this).width(wid);
            var hei=jQuery(this).find(".colorlink").outerHeight();
            jQuery(this).height(hei);
        });
        jQuery(".colorlink").fadeTo("fast",0.05);
        jQuery(".bwcover").fadeTo("fast",.25);
        anibase = jQuery(".linkholder").length;                 
        function heartbeat(){
            newanigo();     
            jQuery(".bwcover").eq(anigo)
                .animate({opacity:.45,},1200,"linear")
                .delay(300)
                .animate({opacity:.15},500,"linear")                    
                .animate({opacity:.25},350);
            jQuery(".colorlink").eq(anigo)
                .animate({opacity:.9,},1200,"linear")
                .animate({opacity:.05,},750,"linear");
            function newanigo() {anigo = Math.floor(Math.random()*(anibase))};
            var t=setTimeout(heartbeat,4000);
        };
        heartbeat();
        jQuery(".linkholder").hover(
            function () {
                if(jQuery(this).find(".bwcover").is(":animated")){
                    jQuery(this).find(".bwcover").stop(true,true);
                };
                jQuery(this).find(".colorlink").fadeTo("slow",1);
                jQuery(this).find(".bwcover" ).fadeOut("slow");
                }, 
            function () {
                if(jQuery(this).find(".bwcover").is(":animated")){
                    jQuery(this).find(".bwcover").stop(true,true);
                };
                jQuery(this).find(".bwcover").fadeTo("fast",.25);
                jQuery(this).find(".colorlink").fadeTo("slow",.05);                 
                }
            );
    });
</script>

<body>
    <div class="linkholder">            
        <div class="colorlink"><a href="#"><img src="DSCN3080.JPG" alt="" /></a></div>
        <div class="bwcover"><img  src="DSCN3080bw.jpg" alt="" /></div>         
    </div>
    <div class="linkholder">
        <div class="colorlink"><a href="#"><img src="relief2.jpg" alt="" /></a></div>
        <div class="bwcover"><img  src="relief2bw.jpg" alt="" /></div>
    </div>
    <div class="linkholder">
        <div class="colorlink"><a href="#"><img src="elegantbook.jpg" alt="" /></a></div>
        <div class="bwcover"><img  src="elegantbookbw.jpg" alt="" /></div>
    </div>
    <div class="linkholder">
        <div class="colorlink"><a href="#"><img src="DSCN3080.JPG" alt="" /></a></div>
        <div class="bwcover"><img  src="DSCN3080bw.jpg" alt="" /></div>
    </div>
    <div class="linkholder">
        <div class="colorlink"><a href="#"><img src="DSCN3080.JPG" alt="" /></a></div>
        <div class="bwcover"><img  src="DSCN3080bw.jpg" alt="" /></div>
    </div>
</body>

Я удивлен, так как думал, что весь смысл jQuery в том, что он кроссплатформенный, и нам не нужно беспокоиться о наших "маленьких эксцентриках" об "эксцентричности" IE.

1 Ответ

4 голосов
/ 04 мая 2011

.animate ({непрозрачности: +0,45,}, 1200, "линейный") * 1 002 *

и

.animate ({непрозрачности: 0,9,}, 1200, "линейный")

.animate ({непрозрачности: +0,05,}, 750, "линейный");

IE не любит запятые в списках свойств объекта.

...