使用php动态加载时的淡入淡出 - FadeIn and FadeOut when dynamically loading with php

FadeIn and FadeOut when dynamically loading with php

我想通过单击#photo1div中的一个拇指图片来淡出#inner_leftdiv中的当前大图。拇指图片用php加载。目前，图片的加载在点击时正常工作，但我希望它们在点击下一个拇指时淡出和淡入。目前，这是我在jquery部分中的内容。。

$('#photo1 img').click(function(){

$('#inner_left img').attr('src',$(this).attr('big'));   });

以及加载拇指的php部分：

 foreach($imagess as $image){
    if($image['image_th_source'] != '' && $image['image_source'] != ''){
        echo '
            <div id=photo1>
               <a href="#"> <img src="'.$image['image_th_source'].'" alt="'.$image['image_alt'].'" title="'.$image['image_title'].'" big="'.$image['image_source'].'" /></a>
            </div>
        ';
    }
}

如果可以的话，请帮忙！

首先，您不应该在foreach迭代器中使用photo1中的id属性，请尝试使用类（或者更改每个div中的id，每个id都应该是唯一的）。

然后可以在jQuery脚本中执行此操作

$('.photo1').click(function(){
    $('#inner_left').fadeOut();
    $('#inner_left').attr('src',$(this).attr('big'));
    $('#inner_left').fadeIn();
});

您可能需要预加载这些图像以获得的干净效果

衰落毕竟是这样解决的：

$('.photo1 img').click(function(){
var our_photo =$(this);
$('#inner_left').fadeOut(1500, function(){
    $('#inner_left img').attr('src',our_photo.attr('big'));
    $('#inner_left').fadeIn(1500);
});});

谢谢你的帮助！