Question

以下是此问题的Codepen，可用于查看问题：http://codepen.io/theclarkofben/pen/xKhsd

正如您所见，由于我已应用于div的负余量，.Show()效果无法正常运作。

任何人都可以帮忙解释为什么会这样吗？

有没有办法在没有问题的情况下使用此方法使用负边距？

我正在使用Chrome。我尝试过不同版本的jQuery和jQuery UI，但是看到了同样的问题。

$(function() {
  // run the currently selected effect
  function runEffect() {
    // get effect type from
    var selectedEffect = "clip";

    // most effect types need no options passed by default
    var options = {};
    // run the effect
    $("#show_effect").show(selectedEffect, options, 500, callback);
  };

  //callback function to bring a hidden box back
  function callback() {
    setTimeout(function() {
      $("#show_effect:visible").removeAttr("style").fadeOut();
    }, 1000);
  };

  // set effect from select menu value
  $("#about_me_button").click(function() {
    runEffect();
  });

  $("#show_effect").hide();
});

.about_me {
  width: 600px;
  height: 225px;
  margin-right: -300px;
}

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<button id="about_me_button">About Me</button>
<div id="show_effect" class="about_me">
  <p>Quis vivendum ei vim, ut alia essent persequeris ius. Et sed diam harum consul, ut usu admodum appareat. In odio tale per, vel eu semper feugait vituperatoribus. Accumsan deseruisse eos te, vix nibh omnis ei.Quis vivendum ei vim, ut alia essent persequeris
    ius. Et sed diam harum consul, ut usu admodum appareat. In odio tale per, vel eu semper feugait vituperatoribus. Accumsan deseruisse eos te, vix nibh omnis ei.Quis vivendum ei vim, ut alia essent persequeris ius. Et sed diam harum consul, ut usu admodum
    appareat. In odio tale per, vel eu semper feugait vituperatoribus. Accumsan deseruisse eos te, vix nibh omnis ei.Quis vivendum ei vim, ut alia essent persequeris ius. Et sed diam harum consul, ut usu admodum appareat. In odio tale per, vel eu semper
    feugait vituperatoribus.</p>
</div>

Answer 1

您可以在按钮点击时将margin-right css更改为300px，在回调时将其更改为-300px。我试过它工作正常。希望我现在明白你的要求！ Example - codepen

  $(function() {
    // run the currently selected effect
    function runEffect() {
      // get effect type from
      var selectedEffect = "clip";

      // most effect types need no options passed by default
      var options = {};
      // run the effect
      $(".about_me").css("margin-right", "300px");
      $("#show_effect").show(selectedEffect, options, 500, callback);
    };

    //callback function to bring a hidden box back
    function callback() {
      setTimeout(function() {
        $("#show_effect:visible").removeAttr("style").fadeOut();
        $(".about_me").css("margin-right", "-300px");
      }, 1000);
    };

    // set effect from select menu value
    $("#about_me_button").click(function() {
      runEffect();
    });

    $("#show_effect").hide();
  });

.about_me {
  width: 600px;
  height: 225px;
  margin-right: -300px;
}

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<button id="about_me_button">About Me</button>
<div id="show_effect" class="about_me">
  <p>Quis vivendum ei vim, ut alia essent persequeris ius. Et sed diam harum consul, ut usu admodum appareat. In odio tale per, vel eu semper feugait vituperatoribus. Accumsan deseruisse eos te, vix nibh omnis ei.Quis vivendum ei vim, ut alia essent persequeris
    ius. Et sed diam harum consul, ut usu admodum appareat. In odio tale per, vel eu semper feugait vituperatoribus. Accumsan deseruisse eos te, vix nibh omnis ei.Quis vivendum ei vim, ut alia essent persequeris ius. Et sed diam harum consul, ut usu admodum
    appareat. In odio tale per, vel eu semper feugait vituperatoribus. Accumsan deseruisse eos te, vix nibh omnis ei.Quis vivendum ei vim, ut alia essent persequeris ius. Et sed diam harum consul, ut usu admodum appareat. In odio tale per, vel eu semper
    feugait vituperatoribus.</p>
</div>

Answer 2

确定..

因为我等待并且无法找出您想要使用负保证金的原因。我想出了两种方法......

1 - 使用margin-left:300px代替margin-right:-300px - 它消除了闪烁效应，但做了同样的工作..

.about_me {
  width: 600px;
  height: 225px;
  margin-left:300px
}

2 - 为<div class="about-me">引入父容器，并为其指定样式margin-right:-300px 。

Codepen：http://codepen.io/anon/pen/zHfbC HTML：

<div class="about_me_container">
  <div  id="show_effect" class="about_me">
     <p>About me goes here</p>
  </div>
</div>

CSS：

.about_me {
  width: 600px;
  height: 225px;

}

.about_me_container{
  margin-right:-300px;
}

希望能帮到你！

此致的 RP

如果CSS中的负边距，jQuery .Show（）不起作用

2 个答案: