jquery从对象中心设置动画_Jquery_Jquery Animate

jquery从对象中心设置动画

jquery

jquery从对象中心设置动画,jquery,jquery-animate,Jquery,Jquery Animate,我正在尝试创建一个类似于本页底部的产品查看器。正如您所看到的，该产品从中间而不是左上角进行动画制作，我认为这是Jquery的默认设置。所以我正在做的是尝试设置宽度和高度的动画，然后设置偏移，使其看起来像是从中心开始设置动画我的代码如下所示： <style> body { background: black; } .box { background: #fff url('pic.jpg') no-repeat 0 0; width: 200px;

我正在尝试创建一个类似于本页底部的产品查看器。正如您所看到的，该产品从中间而不是左上角进行动画制作，我认为这是Jquery的默认设置。所以我正在做的是尝试设置宽度和高度的动画，然后设置偏移，使其看起来像是从中心开始设置动画

我的代码如下所示：

<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>


身体{
背景：黑色；
}
.盒子{
背景：#fff url（'pic.jpg'）不重复0；
宽度：200px；
高度：200px；
利润率：10px4%；
浮动：左；
}
$（文档）.ready（函数（）{
$（“.box”）.hover（函数（）{
美元（“.box”）。不是（这个）。法代托（500，0.5）；
$（此）。设置动画({
宽度：300，
身高：300，
左：-100，
前-100名
}, 500);
},
函数（）{
$（此）。设置动画({
宽度：200，
身高：200，
左:100,，
排名：100
}, 500);
$（“.box”）.fadeTo（500,1）；
});
});

我似乎不能让它按我所希望的那样工作。有人能帮上忙吗，或者建议一种更好的技术？非常感谢

在玩过之后，我终于达到了我想要的效果。以下是迄今为止的代码：

<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>


身体{
背景：黑色；
}
.盒子{
背景：#fff；
宽度：200px；
高度：200px；
利润率：10px4%；
浮动：左；
位置：相对位置；
z指数：0；
}
img{
位置：相对位置；
排名：0；
左：0；
z指数：0；
}
$（文档）.ready（函数（）{
$（“.box”）.hover（函数（）{
美元（“.box”）。非（本）。法代托（500，0.1）；
$（this.find（'img'）。设置动画({
宽度：300，
身高：300，
左：-50，
前-50名
}, 100);
},
函数（）{
$（“.box”）.fadeTo（100,1）；
$（this.find（'img'）。设置动画({
宽度：200，
身高：200，
左:0,，
排名：0
}, 500);
});
});

我从您的URL获得此信息：需要授权此服务器无法验证您是否有权访问您请求的文档。您提供了错误的凭据（例如，错误的密码），或者您的浏览器不知道如何提供所需的凭据。非常感谢，位置“absolute”和负数“left”和“top”值帮了我的忙。使用jQuery UI，show方法将“scale”作为参数传入。谢谢杰米·迪克森