此行似乎在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();
});
});