jquery 슬라이드 ,animate 관련 (중요할듯)

jyp·2023년 2월 1일
0

맥북으로 혼공하기

목록 보기
3/32
뤱 ! 
wrap() : 요소를 씌운다
unwrap() : 요소를 씌우고 있는 요소를 벗긴다
wrapAll() : 전부 감싼다.
wrapInner() : 내부를 감싼다.
<script>
	$(function()
	{
		$("#btn1").click(function()
		{
			$("#aa").hide("fast");
		});
		$("#btn2").click(function()
		{
			$("#aa").show("fast");
		});
	
		$("#btn").click(function()
		{
			alert($("body").html());
		});
	});
</script>

<input type="button" id="btn1" value="숨기기">
<input type="button" id="btn2" value="보이기">

<img id="aa" src="1.webp" width="200">

사진 스르륵 보여주기

fade in,out 이거 야무짐

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $(function()
    {
        $("#btn1").click(function()
        {
            $("#aa").fadeIn();
        });
        $("#btn2").click(function()
        {
            $("#aa").fadeOut();
        });
    });
</script>
</head>
<body>
    <input type="button" id="btn1" value="fadeIn()">
    <input type="button" id="btn2" value="fadeOut()">
    <hr>
    <img id="aa" src="1.webp" width="150">
</body>

slide 관련 (slow,fast,시간(1/1000)

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $(function()
    {
        $("#btn1").click(function()
        {
            $("#aa").slideUp();
        });
        $("#btn2").click(function()
        {
            $("#aa").slideDown();
        });
    });
</script>
</head>
<body>
    <input type="button" id="btn1" value="slideUp()">
    <input type="button" id="btn2" value="slideDown()">
    <hr>
    <div id="aa"> <img src="1.webp" width="150"> </div>
</body>

slide 슬라이드할 내용 사진이나,텍스트를 div로 감싸주고 슬라이드 시켜서 사용하면 자연스럽게 슬라이드 됨

카테고리 슬라이드 관련 참고코드

// nav 메뉴
$("nav > ul > li").mouseover(function () {
    $(this).find(".submenu").stop().slideDown();
});

$("nav > ul > li").mouseleave(function () {
    $(this).find(".submenu").stop().slideUp();
});
// // nav 메뉴 끝



설명
(nav > ul > li)에서 태그를 선택하고 마우스를 올렸을때

$(this).find(".submenu") 여기서 this는 (nav > ul > li) 이다.

this를 find(class명 submenu) 찾아서 slideDown()/ slideUp()을 해준다.

근데 stop() 없이 할 경우 명령이 쌓여서 마우스를 내려도 반복하기때문에

stop().slideDown(); 해당 명령어 앞에 stop()을 써준다.

이미지 슬라이드 관련 참고코드

// 이미지 슬라이드
var index_img = 0;
setInterval(function () {
    if (index_img < 2) {
        index_img++;
    } else {
        index_img = 0;
    }

    var slide_position = index_img * (-1200) + "px";
    $(".slidelist").animate({
        left: slide_position
    }, 400);
}, 3000);

// // 이미지 슬라이드 끝


설명
이미지 파일이 3장이고 1번부터 시작해야하기때문에 index_img = 0; 변수를 지정해줌
setInterval 메소드를 사용해서 3000 (3초)마다 실행하게 한다.

if문을 보면 index_img (0) < 2 이므로 참이다.
그래서 index_img++ 로 증감을 시켜준다

index_img < 2 여기서 증감을 다하고 index_img가 2가 되면
else가 되어서 index_img를 다시 0으로 바꿔준다.
(계속 처음으로 돌아가 반복 시키기 위함.)

아래쪽에서 이미지 파일의 움직임을 위한 코드들이다.
변수 slide_position에 index_img * (-1200) + px 을 지정한다.

-1200은 슬라이드 width: 1200px 이므로 그림이 왼쪽으로 빠지면서 다른 그림이
오른쪽에서 들어온다.

아래 쿼리문을 보면 class명 slidelist에 animate메소드를 사용해서
left: slide_position 해줌으로 왼쪽으로 이동하고  400은 (0.4초)에 걸쳐 그림이 넘어감

animate 관련

<style>
    #aa {
        width:50px;
        height:50px;
        background:red;
        position:absolute;
        left:100px;
        top:100px;
    }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $(function()
    {
        var left = 100;
        $("#btn1").click(function()
        {
            ss = setInterval(function()
            {
                left++;
                $("#aa").css("left",left);
                if(left==400)
                {
                    clearInterval(ss);
                }
            },10 );
        });

        $("#btn2").click(function()
        {
            $("#aa").animate( // $("요소").animate({타겟},시간);
            {
                left:"400px"
            },4000);
        });

        $("#btn3").click(function()
        {
            $("#aa").animate(
            {
                width:"200px",
                height:"200px"
            },3000);
        });

        $("#btn4").click(function()
        {
            $("#aa").animate(
            {
                width:"50px",
                height:"50px"
            },3000);
        });

        $("#btn5").click(function()
        {
            $("#aa").animate(
            {
                left:"300px",
                top:"200px"
            },3000);
        });
    });
</script>
</head>
<body>
    <input type="button" id="btn1" value="오른쪽으로 이동">
    <input type="button" id="btn2" value="오른쪽으로 이동2">
    <input type="button" id="btn3" value="크기 증가">
    <input type="button" id="btn4" value="크기 감소">
    <input type="button" id="btn5" value="위치 이동">
    <hr>
    <div id="aa"></div>
</body>
profile
국비 코딩

0개의 댓글