带有fadein/out的JQuery加载导致闪烁

我有一个图片页面

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

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

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

目前，一切正常，但我在'images.php'的淡出和'image1.php'的淡出上都得到了双闪，反之亦然。就像图像淡出两次，然后淡入两次一样。这就是我想要避免的

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>

....

$（文档）.ready（函数（）{
$（'#image1'）。单击（函数（）{
$（'contentWrap'）.fadeOut（'slow'）；
$（'#contentWrap'）。加载（“http://example.com/image1.php");
$（'contentWrap'）.fadeIn（'slow'）；
});
});
....

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>

$（文档）.ready（函数（）{
$（'.back'）。单击（函数（）{
$（'contentWrap'）.fadeOut（'slow'）；
$（'#contentWrap'）。加载（“http://example.com/images.php");
$（'contentWrap'）.fadeIn（'slow'）；
});
});

有没有更好的方法来做到这一点，以及如何避免双重褪色效果

---

我认为这是由于使用了两次ID contentWrap造成的，但当我更改其中一个页面和脚本上的ID时，仍然会收到不希望看到的效果。

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

$（文档）.ready（函数（）{
$（'#image1'）。单击（函数（）{
$（'contentWrap'）.fadeOut（'slow'）；
$（'#contentWrap'）。加载（“http://example.com/image1.php");
$（'contentWrap'）.fadeIn（'slow'）；
});
$（'.back'）。单击（函数（）{
$（'contentWrap'）.fadeOut（'slow'）；
$（'#contentWrap'）。加载（“http://example.com/images.php");
$（'contentWrap'）.fadeIn（'slow'）；
});
});

这对我来说不太管用。用于#image one的函数启动了，但用于.back的函数没有启动。对我来说，这两个函数似乎都启动了

<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>