jquery从对象中心动画答案

【问题标题】：jquery animate from object centerjquery从对象中心动画
【发布时间】：2010-06-03 08:48:03
【问题描述】：

我正在尝试创建一个类似于本页底部http://www.logitech.com/en-gb/ 的产品查看器。如您所见，产品从中心而不是左上角进行动画处理，我认为这是 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>

我似乎无法按我的意愿工作。任何人都可以帮助解决这个问题或提出更好的技术吗？非常感谢

【问题讨论】：

我从您的 URL 得到这个：需要授权此服务器无法验证您是否有权访问您请求的文档。您提供了错误的凭据（例如密码错误），或者您的浏览器不了解如何提供所需的凭据。

标签： jquery jquery-animate

【解决方案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>

【讨论】：

非常感谢，位置 'absolute' 和负值 'left' 和 'top' 对我有用。
使用 jQuery UI 和 show 方法，传入“scale”作为参数。谢谢杰米迪克森bit.ly/RvMDHR