Question

我有这个代码。我想让div从中间动画并覆盖整个空间。就像这样 enter image description here

HTML

 <div id="wrap">    
    <div class="anim"></div>    
  </div>

JQUERY

$('.anim').on('mouseover',function(){

  $(this).animate({
    height:200,
    width:300,
    right:100        
  });     

});


$('.anim').on('mouseover',function(){

  $(this).animate({
    height:100,
    width:100        
  });

});

多次尝试，但它只是向左或向右动画。

演示http://jsbin.com/uqEcajEm/1/

Answer 1

如果您将margin-left: 100px上的.anim更改为margin: 0 auto这应该有效，请参阅http://jsbin.com/uqEcajEm/2

它使盒子始终居中。

Answer 2

<style id="jsbin-css">
#wrap{border:1px solid #000;height:200px;width:300px;position:relative}

.anim{border:1px solid red;width:100px;height:100px;margin-left: auto;
  margin-right: auto;}
</style>
<script src="JS%20Bin_files/ga.js" async="" type="text/javascript"></script><link href="JS%20Bin_files/edit.css" rel="stylesheet"></head>
<body>
  <div id="wrap">

    <div style="height: 100px; width: 100px; right: 100px;" class="anim"></div>

  </div>
<script>
$('.anim').on('mouseover',function(){

  $(this).animate({
    height:200,
    width:300,

  });


});


$('.anim').on('mouseover',function(){

  $(this).animate({
    height:100,
    width:100,

  });


});
</script>

从中间动画div

2 个答案: