fadeOut()和fadeIn()在IE 11 for Slider

时间:2015-05-18 15:43:05

标签: javascript jquery css3 internet-explorer

此行似乎在IE中看不到。但它可以在Chrome,Firefox和Safari中使用。我不确定这在其他IE浏览器中看起来如何,但有问题的IE是 IE 11。问题在于没有在IE中显示的任何类型的淡入淡出过渡,但我调用fadeIn()fadeOut()并且它在其他地方读取!在IE中,它只是笨拙地隐藏,然后显示下一张幻灯片。任何想法为什么..

$('.img-wrap .slideZ:first-child').fadeOut().next().fadeIn().end().appendTo('.img-wrap');

完整代码。

HTML:

<div class="paginateyo">
            <div class="prevbox">
            <img src="images/prev_arrow.jpg" id="prv" alt="Previous"/>
            <span class="prvp">previous</span>
            </div>
            /
            <div class="nextbox">
            <span class="nxtp">next</span>
            <img src="images/next_arrow.jpg" id="nxt" alt="Next"/>
            </div>
        </div>
        </div>  

        <div id="img-grp-wrap">
            <div class="img-wrap">
                <div class="slideZ">
                <img src="images/slide_image1.jpg" alt=""/>
                <div class="captionZ">aaaaaaaaaaaaaa
                </div>
                </div>
                <div class="slideZ">
                <img src="images/slide_image2.jpg" alt=""/>
                <div class="captionZ">bbbbbbbbbbbbbb
                </div>
                </div>
                <div class="slideZ">
                <img src="images/slide_image3.jpg" alt=""/>
                <div class="captionZ">cccccccccccccccc
                </div>
                </div>
                <div class="slideZ">
                <img src="images/slide_image4.jpg" alt=""/>
                <div class="captionZ">dddddddddddddddd
                </div>
                </div>
                <div class="slideZ">
                <img src="images/slide_image5.jpg" alt=""/>
                <div class="captionZ">eeeeeeeeeeeeeeeeee
                </div>
                </div>
                <div class="slideZ">
                <img src="images/slide_image6.jpg" alt=""/>
                <div class="captionZ">fffffffffffffffff
                </div>
                </div>
                <div class="slideZ">
                <img src="images/slide_image7.jpg" alt=""/>
                <div class="captionZ">gggggggggggggggggg
                </div>
                </div>
            </div>  

        </div>

JS:

$(document).ready(function() {
$('.img-wrap .slideZ:gt(0)').hide();
$('.nextbox').click(function() {
    $('.captionZ').fadeIn();
    $('.img-wrap .slideZ:first-child').fadeOut().next().fadeIn().end().appendTo('.img-wrap');
});
$('.prevbox').click(function() {
    $('.captionZ').fadeIn();
    $('.img-wrap .slideZ:first-child').fadeOut();
    $('.img-wrap .slideZ:last-child').prependTo('.img-wrap').fadeOut();
    $('.img-wrap .slideZ:first-child').fadeIn();
 });
});

0 个答案:

没有答案