zoukankan      html  css  js  c++  java
  • IE中使用jquery的fadeIn()失效的问题

    在自己写的一个轮播组件中遇到一个问题,使用jquery的fadeIn动画时,在IE11中表现不正常,没有渐入的效果。

    1、HTML结构

    <div class="mainpage-slideshow-top outerbox">
        <a href="#"><img src="img/mainpage/mainpage-slideshow-top-img1.jpg" alt="爆品提前抢 最高减1500元"></a>
        <a href="#"><img src="img/mainpage/mainpage-slideshow-top-img2.jpg" alt="乐Max2 购机送乐视会员"></a>
        <a href="#"><img src="img/mainpage/mainpage-slideshow-top-img3.jpg" alt="潮饰国际范 满199减100"></a>
        <a href="#"><img src="img/mainpage/mainpage-slideshow-top-img4.jpg" alt="OPPO新品上市 预售好礼专享"></a>
        <a href="#"><img src="img/mainpage/mainpage-slideshow-top-img5.jpg" alt="12.12狂欢 满5000减300"></a>
        <a href="#"><img src="img/mainpage/mainpage-slideshow-top-img6.jpg" alt="时尚腕表 大牌直降千元"></a>
        <a href="#"><img src="img/mainpage/mainpage-slideshow-top-img7.jpg" alt="京东E卡 传递真情 表达心意"></a>
        <a href="#"><img src="img/mainpage/mainpage-slideshow-top-img8.jpg" alt="小米新品 拍照黑科技"></a>
    </div>

    2、CSS

    .mainpage-slideshow{
        float: left;
        width: 790px;
        height: 480px;
        margin-left: 10px;
    }
    
    //使用jq添加的样式
    $(".outerbox img").css({
        position: 'absolute',
        left:'0',
        top:'0'
    });

    3、jquery

    $(".outerbox >a").stop(true,true).eq(index).fadeIn(600).siblings('a').hide(400);

    4、渐入渐出的效果在firefox,chrome中均正常,但是在IE11中无法出现渐入的效果。fadeIn是由opacity来实现的,IE11肯定是支持opacity的。

    5、最后把目光放在了CSS上。我这里是<a>标签里嵌套<img>,这里并没有说明<a>的样式,会不会是这里的问题?

    6、修改CSS样式,将$(".outerbox img")修改为$(".outerbox >a")后,问题得到解决,IE11也能正常显示渐入渐出了。

    7、根据网上资料,这个问题类似于

    如果fadeIn的元素的子元素有position属性时 以relative值为最严重 有position属性的元素不会出现fadeIn的效果!

    https://my.oschina.net/noxiaomi/blog/195257

     8、所以在以后遇到<a>标签里嵌套单个<img>并需要实现动画效果时,最好不要对img使用绝对定位进行布局,可通过对<a>声明样式实现布局。

  • 相关阅读:
    CodeForces 734F Anton and School
    CodeForces 733F Drivers Dissatisfaction
    CodeForces 733C Epidemic in Monstropolis
    ZOJ 3498 Javabeans
    ZOJ 3497 Mistwald
    ZOJ 3495 Lego Bricks
    CodeForces 732F Tourist Reform
    CodeForces 732E Sockets
    CodeForces 731E Funny Game
    CodeForces 731D 80-th Level Archeology
  • 原文地址:https://www.cnblogs.com/zczhangcui/p/6193544.html
Copyright © 2011-2022 走看看