클릭하면 불투명도가 전환됩니다.

Question

정의 된 CSS 전환을 사용하여 이미지가 희미해질 수있는 방법이 있습니까? 지금은 완전히 불투명하게 터져 나왔습니다.

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script> 
<style type="text/css"> 
.fadeIn { 
    opacity:0; 
    -moz-transition: opacity 5.5s ease 0.300s; 
    -webkit-transition: opacity 5.5s ease 0.300s; 
    -o-transition: opacity 5.5s ease 0.300s; 
    transition: opacity 5.5s ease 0.300s; 
} 
</style> 
<script> 
var makeImage = function() { 
    $('#image').remove(); 

    $(document.body).append('<img id="image" class="fadeIn" src="http://a57.foxnews.com/global.fncstatic.com/static/managed/img/Scitech/660/371/tardar-sauce-the-cat.jpg?ve=1" />'); 

    var img = $('#image')[0]; 
    console.log(img.style); 
    img.style["opacity"] = 1; 
}; 
</script> 

<title>Fade Example</title> 
<input id="makeButton" type="button" value="Make and fade" onclick="makeImage()"; /> 

편집 : jade가 제공하는 fadeIn 기능이 있습니다. 이 예제에서 jquery를 사용하여 후회하는 것은 CSS 전환 속성을 사용하여 수행하는 것이 었습니다.

Answer 1

당신이 당신의 스크립트에서 전체 (1 = 100 %)에 불투명도를 설정하고 있기 때문에 전체 불투명도를 보여주고있다

:

img.style["opacity"] = 1; 

당신이 jQuery를 사용하고 있기 때문에 내가 CSS 전환이 어떻게 작동하는지 잘 모르겠지만, 어쨌든 : 그것은 당신의 문제에 대한 가장 간단한 대답은 같은 소리

var makeImage = function() { 
    $('#image').remove(); 

    $(document.body).append('<img id="image" class="fadeIn" src="http://a57.foxnews.com/global.fncstatic.com/static/managed/img/Scitech/660/371/tardar-sauce-the-cat.jpg?ve=1" />'); 

    var img = $('#image')[0]; 
    console.log(img.style); 
    img.fadeIn(5500); 
}; 

Answer 2

JQuery와의 .fadein()을 사용하는 것입니다.

JQuery의 예제 코드는 여기를 참조 할 때 도움이됩니다.

$('#clickme').click(function() { 
     $('#book').fadeIn('slow', function() { 
     // Animation complete 
     }); 
    }); 

Answer 3

나는 당신이 원하는 것을 잘 모르겠지만, 당신은 잘못 많은 일을하고있다 :

1. var img = $('#image')[0]; 잘못이다. $('#image')은 하나의 요소 (ID가 image 인 요소) 만 선택하므로 인덱싱을 제공 할 필요가 없습니다.이 요소는 var img=$('#image')만으로 가능합니다.

2. img.style["opacity"] = 1; 잘못되었습니다. 그렇게 자바 스크립트에서 스타일 속성에 액세스하지 마십시오. 대신 도트 멤버를 사용하십시오. 즉 img.style.opacity = 1;

지금, 당신이 이미 jQuery를 사용하고 있기 때문에 당신은 단순히 당신의 버튼 클릭시 클래스 .fadeIn을 적용 할, 가정하고,이 작업을 수행 :

img.addClass('fadeIn'); 

나는 짐작 , 당신이 원하는 것은/변경 (jQuery를 CSS3를 사용하지 않음으로써) 클릭 또는 부하에 두 이미지의 투명도를 전환하는 것입니다,이 시도 :

과 같이 두 개의 CSS는 클래스 만들기 :

.fadeIn { 
    -webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out; 
} 
.transparent 
{ 
    opacity:0; 
} 

간단하게는 버튼 클릭 또는 부하에 투명 클래스를 전환 :

$('#toggle').click(function(){ 
    $('#image').toggleClass('transparent'); 
}); 

완료 및 코드이 fiddle를 참조하십시오.