JQuery 加载淡入/淡出导致闪烁

Question

我有一个图像页面。

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

我正在使用 images.php 中的单个图像和脚本进行测试，但我计划使用十几个左右。我正在努力。

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

目前，一切工作正常，但我在“images.php”的淡出和“image1.php”的淡入时都出现双闪，反之亦然。就好像图像淡出两次，然后淡入两次。这就是我试图避免的。

图像.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>

....

图像1.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 时，我仍然收到不良效果。

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>