반응형
[JavaScript & jQuery] html에서 이미지 변경 시 사라졌다 나타나는 효과(fadeIn & fadeOut)
이미지 변경시킬 때 페이드인 이나 페이드아웃 효과 주는 방법 입니다 !
예제코드
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>fadeInOut</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<button>클릭!!</button>
<img style="width: 25%;" src="https://cdn.autotribune.co.kr/news/photo/202304/8017_43246_1529.jpg">
</body>
</html>
<script>
$(function(){
$("button").click(function(){
$("img").fadeOut(2000, function(){
$("img").attr("src", "https://file2.nocutnews.co.kr/newsroom/image/2023/05/03/202305031714287586_0.jpg");
$("img").fadeIn(2000);
});
});
});
</script>결과값
728x90
반응형
'Coding > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트로 input창 엔터로 적용하는 방법 !! (0) | 2023.06.10 |
|---|---|
| [JavaScript & jQuery] 제이쿼리 사용하여 input 텍스트 박스 placeholder 변경하는 방법 !! (0) | 2023.06.09 |
| [JavaScript] 자바스크립트로 로또 번호 추첨기 만드는 방법 !! (0) | 2023.05.17 |
| [JavaScript & jQuery] 자바스크립트를 활용하여 수학 수식 편집기 만드는 방법 !! (0) | 2023.05.16 |
| [JavaScript] 자바스크립트로 .ini 파일 읽기 & 불러오기 방법 !! (0) | 2023.05.09 |
댓글