jquery - 已完成的 jquery 库中的淡入淡出功能

Question

我如何在这段代码中获得淡入淡出效果？当我点击拇指时，应该淡出“大”图片！

这是画廊演示http://workshop.rs/demo/gallery-in-4-lines/

<div class="box">
        <div id="panel"><img id="largeImage" src="pic/image_08_large.jpg" /> </div>
        <div class="text"> Die Idee und das Konzept</div>
        <div id="thumbs">
        <img src="pic/image_08_thumb.jpg" alt="1st image description" />
        <img src="pic/image_09_thumb.jpg" alt="2nd image description" />
        <img src="pic/image_10_thumb.jpg" alt="3rd image description" />

        </div>

Javascript

<script>

$('#thumbs').delegate('img','click', function(){
$('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
$('#description').html($(this).attr('alt'));
});

</script>

CSS：

#thumbs { padding-top: 10px; overflow: hidden; }
#thumbs img, #largeImage { border: 1px solid gray; padding: 4px; 
background-color:white; cursor: pointer; }
#thumbs img { float: left; margin-left:60px;  margin-top:10px; }
#description { background: black; color: white; position: absolute; bottom: 0;   
padding: 10px 20px; width: 525px; margin: 5px; }
#panel { position: relative; }

Answer 1

你试试这个

$('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'))
.hide().fadeIn('slow');

我没有尝试过，但我认为这可能有效。

Answer 2

使用您的代码，您无法达到预期的效果。所以你需要：

• （...获得所需的 efx :) 在“面板”内放置 2 个图像（您可以克隆单击的一个！）
• 比你需要的1：将克隆放置到位（最初需要隐藏）
• 2：淡化旧图像
• 3：淡入淡出克隆（新）图像，如：

jsBin 演示示例

$('.thumbs').on('click','img', function(){
        var $thisPanel = $(this).parents('.gallery').find('.panel');
        var clone = $(this).clone().hide();
        clone.appendTo($thisPanel);
        $thisPanel.find('img').eq(0).fadeTo(600,0,function(){
           $(this).remove();
        });
        clone.fadeTo(600,1);  
        $('.description').html($(this).attr('alt'));
});

不要将ID用于页面上的多个元素，而应使用class。（见演示）：

<div class="gallery">
    <div class="panel">
        <img src="http://placehold.it/565x300/cf5" />
        <div class="description">First image description</div>
    </div>
 
    <div class="thumbs">
        <img src="http://placehold.it/565x300/cf5" alt="1st image description" />
        <img src="http://placehold.it/565x300/f0f" alt="2nd image description" />
        <img src="http://placehold.it/565x300/444" alt="3rd image description" />
    </div>
</div>

和CSS：

  .thumbs { padding-top: 10px; overflow: hidden;}
    .thumbs img, .panel img {
     border: 1px solid gray;
     padding: 4px;
     background-color: white;
     cursor: pointer;
    }
  .panel img{
    position:absolute;
  }
    .thumbs img {
     float: left;
     margin-right: 3px;
    width:100px;
    }
    .description {
     background: black;
     color: white;
     position: absolute;
     z-index:2;
     bottom: 0;
     padding: 10px 20px;
     width: 525px;
     margin: 5px;
    }
  .panel { position: relative; height:310px; }