Javascript 预览图像fadein

我有一个表单，它使用这个小脚本将当前上传的图像输出到访问者的浏览器本身。图像的输出太突然。如何将此脚本设置为

fadein

将图像放入div#blah

$（文档）.ready（函数（）{
函数readURL（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$（'#blah'）.attr（'src'，e.target.result）；
}
reader.readAsDataURL（input.files[0]）；
}
}
$（“#图像一”）.change（函数（）{
readURL（this）；
});
});

这里是html，如果它有帮助的话。提前谢谢

<fieldset class="images">
    <label for="image" class="label">UPLOAD IMAGE :</label>
    <input type="file" name="image-one" id="image-one" tabindex="25" required=""/>
</fieldset>

<div class="inline-image-preivew">
    <img id="blah" src="#" width="300" align="center"/>
</div>

上载图像：

您应该先隐藏预览类

CSS

然后在ReaderLoad中可以使用.show/.toggle jquery命令

 reader.onload = function (e) {
                    $('#blah').attr('src', e.target.result);
                    $('.inline-image-preview')fadeIn( "slow", function() {
    // Animation complete
  });

您还可以决定其他选项：

---

我想这就是你要找的

您可以使用CSS3转换或jQuery库使图像淡入淡入

下面是使用jQuery.fadeIn（）的技巧

（在您的情况下，这是基于正在上载的图像，而不是单击按钮）

使用您的代码，应该是这样的：

附加css

#blah 
{
    display : none;
}

JavaScript代码

$(document).ready(function() { 
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#blah')
                    .attr('src', e.target.result)
                    .fadeIn("slow");

            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#image-one").change(function(){
        readURL(this);
    });
});

另一种选择是，这里有一个链接，指向一篇关于CSS不透明度转换的博客文章：

---

仅在一个小便笺上，preivew通常拼写为preview。只要确保你的css有相同的拼写。不起作用。仍然能够检索预览图像，但不会淡入。仅供参考，如果有问题，我将使用FFox 24.0并在live server上进行测试。另外，请确保匹配了正确的类名。。例如，我使用了您给出的示例：inline image preivet这似乎只适用于其中的按钮。你提到的我的情况不同。我早些时候试过，但失败了。不过，我将尝试css方法。非常感谢。

// With the element initially hidden, we can show it slowly:
$( "#clickme" ).click(function() {
  $( "#kitten" ).fadeIn( "slow", function() {
    // Animation complete
  });
});

#blah 
{
    display : none;
}

$(document).ready(function() { 
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#blah')
                    .attr('src', e.target.result)
                    .fadeIn("slow");

            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#image-one").change(function(){
        readURL(this);
    });
});