使用淡入/淡出效果的JQuery加载导致闪烁问题

Question

使用淡入/淡出效果的JQuery加载导致闪烁问题

3

我有一个图片页面。

<div id="contentWrap">
    <?php include 'images.php'; ?>
</div>

我正在测试images.php中的单个图像和脚本，但我计划使用十几个。我正在尝试：

在“images.php”上淡出一组图像
加载所选图像的php文件“image1.php”
在“image1.php”上淡入内容

目前，一切都很好，但在“images.php”的fadeOut和“image1.php”的fadeIn时，我会看到一个双重闪烁，反之亦然。就像图像淡出两次，然后再淡入两次。这就是我想要避免的。

Images.php

<div id="contentWrap">

<script>
$(document).ready(function() {
$('#image1').click(function() {
    $('#contentWrap').fadeOut('slow');
        $('#contentWrap').load("http://example.com/image1.php");
    $('#contentWrap').fadeIn('slow');
});
});
<script>

<a id="image1" class="pics" href="#">
    <img src="aPicture.jpg">
</a>

<a id="image2" class="pics" href="#">
    <img src="anotherPicture.jpg">
</a>

....

Image1.php

<div id="contentWrap">

<script>
$(document).ready(function() {
$('.back').click(function() {
    $('#contentWrap').fadeOut('slow');
     $('#contentWrap').load("http://example.com/images.php");
         $('#contentWrap').fadeIn('slow');
});
});
</script>

<a class="back" href="#">back</a>
<img src="image1-large.jpg">
<img src="image1-effects.jpg">
</div>

有没有更好的方法来解决这个问题，如何避免双重淡出效果？

我以为是因为两次使用ID contentWrap所导致的，但是当我在一个页面和脚本上更改ID时仍然会产生不良影响。

- D Bowman

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Defain · Answer 1

从 #contentWrap div 中删除脚本标签，并将它们移动到外部某个位置（可能是 head 部分或单独的 js 文件中？）。工作中 jsfiddle

<script>

$(document).ready(function() {

$('#image1').click(function() {

    $('#contentWrap').fadeOut('slow');
    $('#contentWrap').load("http://example.com/image1.php");
    $('#contentWrap').fadeIn('slow');

});

$('.back').click(function() {

    $('#contentWrap').fadeOut('slow');
    $('#contentWrap').load("http://example.com/images.php");
    $('#contentWrap').fadeIn('slow');

});

});

</script>

<div id="contentWrap">

<a id="image1" class="pics" href="#">
    <img src="aPicture.jpg">
</a>

<a id="image2" class="pics" href="#">
    <img src="anotherPicture.jpg">
</a>

<div id="contentWrap">

<a class="back" href="#">back</a>
    <img src="image1-large.jpg">
    <img src="image1-effects.jpg">
</div>