【问题标题】:jQuery ~ How to animate box width&height from center centerjQuery〜如何从中心中心动画框宽度高度
【发布时间】:2012-02-14 05:17:32
【问题描述】:

盒子的大小是宽度:200px,高度:140px。 当使用动画改变盒子大小时,它会从左上角开始变换。 如何改变它从中心中心变换。

HTML

<div class="box"></div>

CSS

width:200px;
height:140px;
background-color:#0066CC;

jQuery

$('.box').mouseover(function() {
  $(this).animate({
    width: "210px",
    height: "150px"
  }, 200 );
});
$('.box').mouseout(function() {
  $(this).animate({
    width: "200px",
    height: "140px"
  }, 200 );
});

【问题讨论】:

    标签: jquery


    【解决方案1】:

    这是一个仅使用 CSS 的选项(注意:CSS3):http://jsfiddle.net/g67cc/6/

    .box {
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
    
        width: 200px;
        height: 140px;
        background-color:#0066CC;
        position : absolute;
        left: 100px;
        top: 100px;
    }
    
    .box:hover {
        width: 220px;
        height: 160px;
        left: 90px;
        top: 90px;
    }
    

    【讨论】:

      【解决方案2】:

      我认为这是不可能的。或者,您可以为框的填充设置动画...

      <style>
          .box { width:200px; height:140px; }
      </style>
      
      <div class="box"><div></div></div> ​
      
      <script>
        $('.box').mouseover(function() {
          $(this).animate({
            'padding' : 5
          }, 200 );
        });
        $('.box').mouseout(function() {
          $(this).animate({
            'padding' : 0
          }, 200 );
        });
      </script>
      

      工作示例:

      http://jsfiddle.net/WryxR/1/

      【讨论】:

        【解决方案3】:

        好吧,所以我有解决方案.. Check This fiddle Example

        CSS:

        .box{
            width: 200px;
            height: 140px;
            background-color:#0066CC;
            position : absolute;
            left: 100px;
            top: 100px;
        }
        

        JQUERY:

        $('.box').hover(function(){
          $(this).animate({
            'width': '220px',
            'height': '160px',
            'left': '90px',
            'top': '90px'
          },200);
          },function(){
          $(this).animate({
            'width': '200px',
            'height': '140px',
            'left': '100px',
            'top': '100px'
          },200);
        });
        

        您可以根据需要更改值。

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 2011-07-08
          • 1970-01-01
          • 2017-04-09
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多