안녕하세요 누구든지 내 문제를 도울 수 있는지 궁금 해서요. 롤오버 텍스트를 으로 천천히 텍스트 사이를 희미하게합니다. 당신은 신속 & 즉시이 '미디어'에 대한 텍스트를 바꿉니다 '중립'위에 마우스를하면 내가 ~ http://neutralmotive.com/
jquery없이 javascript 페이드 텍스트 onmouseover
무슨 말인지보고 내 웹 사이트를 방문하십시오. '동기'위로 마우스를 가져 가면 똑같은 일이 발생합니다. 바로 & 즉시이 '디자인'으로 바뀝니다. 마우스가 텍스트 가리킬 때
나는 천천히 & 원활 페이드 하나의 텍스트에서 다음에 텍스트를합니다. 아약스 나 jquery를 사용하지 않고 간단한 자바 스크립트를 사용하고 있습니다.
도와주세요. 당신은 거기에 매 브라우저를 지원하는 열망하지 않은 경우
, 당신의 스팬에 animated 클래스를 추가하고 CSS를 사용 :
.hide{
visibility: hidden;
opacity: 0;
}
.show{
visibility: visible;
opacity: 1;
}
.animated{
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
단점 :
모두 .hide 및 .show이 표시되므로, 그들은 절대적으로 배치해야합니다
당신은 또한 프로그래밍 방식으로 수업을 토글로 자바 스크립트로 이것을 할 수 있습니다.
여기에 몇 가지 유용한 소스입니다 : 천천히 페이드에 대한 코드를 다음
사용 :
var opacity = 99; // Avoid starting at 100% due to Mozilla bug
var slowly = {
fadein : function (id) {
this.fadeLoop(id, opacity);
},
fadeLoop : function (id, opacity) {
var object = document.getElementById(id);
if (opacity >= 5) {
slowly.setOpacity(object, opacity);
opacity -= 4;
window.setTimeout("slowly.fadeLoop('" + id + "', " + opacity + ")", 99);
} else {
object.style.display = "none";
}
},
setOpacity : function (object, opacity) {
object.style.filter = "alpha(style=0,opacity:" + opacity + ")"; // IE
object.style.KHTMLOpacity = opacity/100; // Konqueror
object.style.MozOpacity = opacity/100; // Mozilla (old)
object.style.opacity = opacity/100; // Mozilla (new)
}
}