CODEWITHSUNDEEP
htmljquerycss
ali parsi
ali parsi

Reputation: 41

do you know why my animate method doesnt work for top property?

I've used animate property in my jquery file for top property but it's not working. Do you know what the reason is?

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <link rel="stylesheet" href="font awsome/FontAwesome.Pro.5.11.2.Web/css/all.min.css">
    <script src="font awsome/FontAwesome.Pro.5.11.2.Web/js/all.min.js"></script>

    <!-- Required meta tags -->

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
       <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class=" top-back">
        <img src="images/Untitled-2.png" alt="">
    </div>
    <div class=" main-back" >
        <div class="container">
            <div class="row">
                <div class="col-4">
                    <div class="row">
                        <div class="col-12 ">

                            <div class="blue">
                                <img class="magic" src="images/magic.png" alt="" style="position: absolute; left: 4.5%;">
                                <ul>
                                    <li style="left: 25%; top: 5px" class="pics1"><img src="images/face1.png" alt="" >Facelift surgery</li>
                                    <li style="left: 25%; top: 200px" class="pics2"><img src="images/face2.png" alt="">Lip Augmentation</li>
                                    <li style="left: 25%; top: 390px" class="pics3"><img src="images/face3.png" alt="">Botox Injections</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-8">
                    <div class="row white-box">
                        <div class="col-5">
                            <div class="">
                            <h1>Facelift Surgery</h1>
                            <p>Aromatherapy has a very beneficial effect on the human body and promotes maximum relaxation. The use of aroma oils in the process of massage enhances its effect, relieves fatigue.

                            </p>
                            <button>Make an appointment</button>
                            </div>
                        </div>
                        <div class="col-7 face">
                            <img src="images/face.png" alt="">
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="bottom-back">
        <img src="images/Untitled-3.png" alt="">
    </div>



    <script src="script.js"></script>
</body>
</html>


/* CSS Document */
body{
    margin: 0
}
.top-back img{
 width: 100%;
 padding: 0 !important;
 position: relative;
 top: 10px
}
.main-back{
    background-color: #f3e5d8;
    height: 600px
}
.bottom-back img{
    position: relative;
    top: -10px;
    width: 100%
}
.white-box{
    background-color: #fff9f3;
    border-radius: 30px;
    position: relative;
    top: 108px;
    height: 450px
}
.face img{
    width: 94.5%;;
    position: absolute;
    top: -124px;
    right: 23px;
}
.blue{

    background-color:#2d3663;

    border-radius: 30px;
    position: relative;
    top: -4px;
    width: 78%
}
.blue ul{
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    color: white;
    list-style-type: none;
    padding: 0;
    height: 596px

}
.blue li{
    padding: 15px 0;
    position: absolute

}
.blue img{
    display: block;
    margin: auto;
    width: 90%;
    margin-bottom: 10px
}
.white-box h1 {
    color: #cd8274;
    margin-top: 40px
}
.white-box p{
    color: #474e75;
    margin: 40px 0;
    line-height: 29px;
    font-size: 20px;
}


















$(document).ready(function(){
    $('.pics2').hover(function(){
        $('.magic').animate({top: "195px"});

    });
    $('.pics1').hover(function(){
        $('.magic').animate({top: "0"});


    });
    $('.pics3').hover(function(){
        $('.magic').animate({top: "384px"});

    })

});// JavaScript Document`

Upvotes: 1

Views: 45

Answers (2)

ali parsi
ali parsi

Reputation: 41

i finally found the reason... the CDN of jquery must not be the first one. i changed the position of that and it worked

Upvotes: 1

focus.style
focus.style

Reputation: 6760

Console shows me $(...).animate is not a function

This is the reason

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

Remove it and everything will work. This version of jQuery jquery-3.3.1.slim.min.js is shorter (slim) and doesn't support animate function.

Use the full one instead.

<script
  src="https://code.jquery.com/jquery-3.5.0.js"
  integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc="
  crossorigin="anonymous"></script>

Upvotes: 0

Related Questions