问淡入脚本不会淡出当前图像
EN

Stack Overflow用户

提问于 2013-04-22 02:53:55

回答 1查看 161关注 0票数 0

我有一个脚本，淡入一个主图像时，游客点击缩略图。然而，主图像正在从白色背景中淡入，我希望当前图像淡出，然后新图像淡入。

用我下面的脚本可以做到吗？

提前谢谢你，

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8" />
<title>A Simple jQuery Fade In/Fade Out</title>

<style>
#imageWrap { 
width: 640px; 
height: 420px; 
}
</style>

<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript">    </script>

<script type="text/javascript">
$(document).ready(function() {
$('.thumbnail').live("click", function() {
    $('#mainImage').hide();
    var i = $('<img />').attr('src',this.href).load(function() {
        $('#mainImage').attr('src', i.attr('src'));
        $('#imageWrap').css('background-image', 'none');
        $('#mainImage').fadeIn(1000);
    });
    return false; 
});
});
</script>

</head>
<body>

<a href="dimming/1.jpg" class="thumbnail"><img src="dimming/1.jpg" 
  alt="Image 1" width="20" height="20"/></a>
<a href="dimming/2.jpg" class="thumbnail"><img src="dimming/1.jpg" 
  alt="Thumbnail 2" width="20" height="20"/></a>

<div id="imageWrap">
<img src="dimming/C.jpg" alt="Main Image" id="mainImage"/>
</div>

</body>
</html>

javascript

jquery

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-04-22 03:04:39

试试这个-

var i = $('<img />').attr('src',this.href).load(function() {
    $('#mainImage').fadeOut(1000,function(){  // fade out your main image first
       $('#mainImage').attr('src', i.attr('src'));
       $('#imageWrap').css('background-image', 'none');
       $('#mainImage').fadeIn(1000);  // fade in after your previous image is fadaOut
    });
});

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/16134962

复制

相似问题

问淡入脚本不会淡出当前图像
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问淡入脚本不会淡出当前图像EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问淡入脚本不会淡出当前图像
EN