Question

我想通过单击＃photo1 div中的一个拇指图片来淡出#inner_left div中当前的大图片。拇指图像加载了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>
        ';
    }
}

请尽可能帮忙！

Answer 1

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

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

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

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

Answer 2

毕竟，褪色就这样解决了：

$('.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);

});});

感谢您的帮助！

使用php动态加载时FadeIn和FadeOut

2 个答案: