更改每个slideToggle()调用的边距x%

时间:2018-01-12 10:44:26

标签: javascript jquery html css

我想在使用function Uninstall-Application($computer, $target) { $products = Get-WmiObject Win32_Product -Filter "Name LIKE '%$target%'" -ComputerName $computer foreach ($productInfo in $products) { $pin = $productInfo.IdentifyingNumber $pn = $productInfo.Name $pv = $productInfo.Version if ($pn -ne $null) { for ($i = 0; $i -lt $Productinfo.length; $i++) { $classKey = "IdentifyingNumber=`"$pin[$i]`",Name=`"$pn[$i]`",version=`"$pv[$i]`"" #$uninstallReturn = ([wmi]"\\$computer\root\cimv2:Win32_Product.$classKey").uninstall() #if($uninstallReturn.ReturnValue -ge 0) { Write-Host "Uninstall complete"} #else { $uninstallReturn | Out-Host } } } else { Throw "Product not found" } } } Uninstall-Application "localhost" "Java"

时逐步减少我的容器magin

slideToggle()
$(document).ready(function() {
  $("#btn").click(function() {
    doIt();
  });
});

function doIt() {
  var container = $("#c2");
  var maxMarginTop = container.css("marginTop").replace('px', '');
  var maxMarginBottom = container.css("marginBottom").replace('px', '');

  container.slideToggle({
    duration: 2000,
    progress: function(animation, progress, remainingMilliseconds) {
      var newMarginTop = maxMarginTop - (maxMarginTop * progress);
      var newMarginBottom = maxMarginBottom - (maxMarginBottom * progress);

      container.css("margin-top", newMarginTop);
      container.css("margin-bottom", newMarginBottom);
    },
    complete: function() {
      container.remove();
    }
  });
}
.container {
  margin-top: 20px;
  margin-bottom: 20px;
  height: 20px;
  width: 100px;
  background: red;
}

我必须在幻灯片功能的每一步执行代码。我根据当前进度计算新的保证金。

所以保证金应该从进度所代表的100%变为0%。

在进度函数中,我计算新的边距,并且在记录新值时,这可以正常工作。

但是你可以看到没有任何反应。在完整函数中记录边距值时没有任何改变。

这是一个错误的范围吗?那里发生了什么?

1 个答案:

答案 0 :(得分:1)

您的代码存在的问题是您添加了上边距和下边距,导致collapsing margin - 即您只获得20px的边距。因此,您可以从一个边距开始,然后它将正确动画

为什么不用css动画做这件事:



$(document).ready(function() {
  $("#btn").click(function() {
    $("#c2").addClass('closed');
  });
});

.container {
  margin-top: 20px;
  /* do not need the bottom margin due to collapsing margins */
  height: 20px;
  width: 100px;
  background: red;
  transition: all 2s ease;
}

.container.closed {
  height:0;
  margin:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="btn">Do it</button>

<div class="container" id="c1">
</div>

<div class="container" id="c2">
</div>

<div class="container" id="c3">
</div>
&#13;
&#13;
&#13;

如果你想继续使用js动画,只需删除你的一个边距:

&#13;
&#13;
$(document).ready(function() {
  $("#btn").click(function() {
    doIt();
  });
});

function doIt() {
  var container = $("#c2");
  var maxMarginTop = container.css("marginTop").replace('px', '');
  var maxMarginBottom = container.css("marginBottom").replace('px', '');

  container.slideToggle({
    duration: 2000,
    progress: function(animation, progress, remainingMilliseconds) {
      var newMarginTop = maxMarginTop - (maxMarginTop * progress);
      var newMarginBottom = maxMarginBottom - (maxMarginBottom * progress);

      container.css("margin-top", newMarginTop);
    },
    complete: function() {
      container.remove();
    }
  });
}
&#13;
.container {
  margin-top: 20px;
  height: 20px;
  width: 100px;
  background: red;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="btn">Do it</button>

<div class="container" id="c1">
</div>

<div class="container" id="c2">
</div>

<div class="container" id="c3">
</div>
&#13;
&#13;
&#13;