從對象中心jquery動畫

我正在嘗試創建一個類似於此頁面底部的產品查看器http://www.logitech.com/en-gb/。正如你可以看到產品從中心動畫而不是左上角，我認爲這是Jquery的默認設置。所以我在做的是嘗試動畫的寬度和高度，然後也偏移，使它看起來像它從中心動畫。從對象中心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>

我似乎不能，因爲我希望得到這個工作。任何人都可以幫助或建議更好的技術？非常感謝

來源

2010-06-03 mtwallet

我得到這個從您的網址：需要授權此服務器無法驗證您有權訪問您請求的文檔。您提供了錯誤的憑據（例如，錯誤的密碼），或者您的瀏覽器不知道如何提供所需的憑據。 – XGreen 2010-06-03 09:03:01

試試www.logitech.com – mtwallet 2010-06-03 09:07:37

玩過後，我設法得到了我想要的效果。這是迄今爲止代碼：

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

來源

2010-06-03 11:57:45 mtwallet

非常感謝，絕對的位置和負面的「左」和「頂」值爲我做了訣竅。 – Tintin81 2012-03-15 09:42:47

使用jQuery UI和show方法傳遞「scale」作爲參數。感謝Jamie Dixon http://bit.ly/RvMDHR – pac 2014-05-09 17:07:07

從對象中心jquery動畫

回答

相關問題