All geek questions in one place

JQuery animation from the center of an object

I am trying to create a product viewer similar to the one at the bottom of this page http://www.logitech.com/en-gb/ . Since you can see that the product is animating from the center, and not from the top left, which in my opinion is jQuery by default. So what I'm doing is trying to animate the width and height, and then the offset, so that it looks like it is animating from the center.

My code is as follows:

<style>
  body {
    background: black;
  }
  .box {
    background: #fff url('pic.jpg') no-repeat 0 0;
    width: 200px;
    height: 200px;
    margin: 10px 4%;
    float: left;
  }

</style>

<script type="text/javascript">
    $(document).ready(function() {
        $(".box").hover(function() {
            $(".box").not(this).fadeTo(500, 0.5);
            $(this).animate({
                width: 300,
                height: 300,
                left: -100,
                top: -100
            }, 500);
        },
        function() {
            $(this).animate({
                width: 200,
                height: 200,
                left: 100,
                top: 100
            }, 500);
            $(".box").fadeTo(500, 1);
        });
    });
</script>

        

I cannot get this work to work as I want. Can anyone help with this or suggest a better technique? Many thanks

+3
source share
1 answer

, . :

<html>
<head>
    <script src="../jquery.js"></script>
    <style>
      body {
        background: black;
      }
      .box {
        background: #fff;
        width: 200px;
        height: 200px;
        margin: 10px 4%;
        float: left;
        position: relative;
        z-index: 0;
      }

      img {
        position: relative;
        top: 0;
        left: 0;
        z-index: 0;
      }

    </style>

    <script type="text/javascript">
        $(document).ready(function() {
            $(".box").hover(function() {
                $(".box").not(this).fadeTo(500, 0.1);
                $(this).find('img').animate({
                    width: 300,
                    height: 300,
                    left: -50,
                    top: -50
                }, 100);
            },
            function() {
                $(".box").fadeTo(100, 1);
                $(this).find('img').animate({
                    width: 200,
                    height: 200,
                    left: 0,
                    top: 0
                }, 500);
            });
        });
    </script>
</head>
<body>
    <div class="box"><img src="pic.jpg" /></div>
    <div class="box"><img src="pic.jpg" /></div>
    <div class="box"><img src="pic.jpg" /></div>
    <div class="box"><img src="pic.jpg" /></div>
    <div class="box"><img src="pic.jpg" /></div>
    <div class="box"><img src="pic.jpg" /></div>
    <div class="box"><img src="pic.jpg" /></div>
    <div class="box"><img src="pic.jpg" /></div>
    <div class="box"><img src="pic.jpg" /></div>
    <div class="box"><img src="pic.jpg" /></div>
    <div class="box"><img src="pic.jpg" /></div>
    <div class="box"><img src="pic.jpg" /></div>
</body>

+6

Source: https://habr.com/ru/post/1748308/

More articles:


All Articles