Question

我有一个图片页面。

<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时，我仍然会收到不良影响。

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>

带有淡入/淡出的JQuery加载会导致闪烁

1 个答案: