預覽圖像fadein

我有一個表格，它使用這個小腳本found here來輸出當前上傳的圖像到訪問者的瀏覽器本身。圖像的輸出太突然了。我如何使這個腳本fadein圖像到div #blah。預覽圖像fadein

<script> 
$(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); 
      } 
      reader.readAsDataURL(input.files[0]); 
     } 
    } 

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

這裏是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>

來源

2013-10-11 gurung

剛上一張小紙條preivew通常拼寫預覽。只要確保你的CSS具有相同的拼寫。 – Pogrindis

明白了，謝謝。 – gurung

你應該隱藏預覽類第一..

CSS

.inline-image-preivew 
{ 
    display:none; 
}

然後在readeronload您可以使用.show/.toggle jQuery的命令..

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

您還可以決定其他選項：http://api.jquery.com/show/

我認爲這是你正在尋找的..

來源

2013-10-11 10:42:33 Pogrindis

試一試，謝謝。 – gurung

沒有工作。仍然能夠檢索預覽圖像，但不會淡入。僅供參考，如果它很重要，我正在使用FFox 24.0，並且正在現場服務器上進行測試。 – gurung

更新與斯蒂芬斯淡入和固定類名 – Pogrindis

你可以使圖像褪色使用CSS3過渡，或jQuery庫。

下面是使用jQuery.fadeIn()

http://jsfiddle.net/Q5KtC/1/

小提琴（在你的情況，你會的依據是圖像上載到不是點擊按鈕）

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

使用你的代碼，這應該是這樣的：

額外的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轉換：

http://bavotasan.com/2011/a-simple-fade-with-css3/

來源

2013-10-11 10:48:30

這似乎只適用於它的按鈕。你提到的我的情況是不同的。我早些時候嘗試過，失敗了。但我會嘗試css方法。謝謝。 – gurung

我喜歡這個答案 – Pogrindis

預覽圖像fadein

回答

相關問題