Question

我正在为我网站右下方的固定联系表单创建一个幻灯片切换（上下）。我能够让它向上滑动但无法让它切换回原来的起始位置。

我哪里错了？

jQuery(document).ready(function() {
  jQuery(".footer .contactformbox .sectionbar").click(function() {
    jQuery(".footer .contactformbox").slideToggle({
      direction: "up"
    }, 300).css("bottom", "0");
  });
});

.footer .contactformbox {
  background-color: #fff;
  border: 1px solid #000;
  bottom: -100px;
  height: 140px;
  width: 300px;
  position: fixed;
  display: block !important;
  right: 15px;
  z-index: 999999;
  border-radius: 6px 6px 0 0;
  -moz-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
  -webkit-transition: all .2s ease-in;
}
.footer .contactformbox .sectionbar {
  background-color: #000;
  color: #fff;
  display: block;
  margin: 0 0 20px;
  padding: 10px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footer">
  <div class="contactformbox form-body">
    <div class="sectionbar">Contact Us</div>
  </div>
</div>

查看JSFiddle

Answer 1

除了动画元素的height之外，slideToggle()还会更改元素的display属性。这用于在切换关闭时隐藏元素，并在切换打开时显示该元素。因此，在切换其父容器时保持标题栏可见可能很困难。

如果元素最初显示，它将被隐藏;如果隐藏，它将被显示。

我建议为滑动框的内容创建一个单独的元素，作为标题栏的兄弟。这样，您可以隐藏内容框，同时使其标题栏可见。

在我的演示中，下面的框中包含一个“head”元素和一个“body”元素。身体的高度设置为所需的高度，元素隐藏display:none。

当切换时，身体的高度是动画的。

jQuery(function() {
  jQuery(".formbox-head").click(function() {
    jQuery(".formbox-body").slideToggle(300);
  });
});

.formbox {
  position: fixed;
  bottom: 0;
  right: 1em;
  width: 300px;
  font-size:14px;
}
.formbox-head {
  background-color: #000;
  color: #fff;
  padding: .5em 1em;
  border-radius: .5em .5em 0 0;
}
.formbox-body {
  background-color: #fff;
  border: 1px solid #000;
  height: 5em;
  padding: 1em;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="formbox">
  <div class="formbox-head">Contact Us</div>
  <div class="formbox-body">Box content goes here.</div>
</div>

Answer 2

这将有效：

jsFiddle Demo

 override func touchesBegan(touches: Set<NSObject>, withEvent event: UIEvent) {
    jumpPlayer()
    movingGround.start()



    fruitGenerator.startGeneratingFruitEvery(3)


let frames = [
    SKTexture(imageNamed: "koala_idle"),
    SKTexture(imageNamed: "koala_walk01"),
    SKTexture(imageNamed: "koala_walk02"),


]

let duration = 1.5 + drand48() * 1.0

let move = SKAction.animateWithTextures(frames, timePerFrame:0.10)
let wait = SKAction.waitForDuration(duration)
let rest = SKAction.setTexture(frames[0])
let sequence = SKAction.sequence([move, rest])

player.runAction(SKAction.repeatActionForever(sequence))







}

对于上述内容的缺点是单击表单将最小化它。我建议这种替代方法：

Revised jsFiddle Demo

<强> HTML：

$(".footer .contactformbox .sectionbar").click(function () {
    $(".footer .contactformbox").slideToggle({
        direction: "up"
    }, 300).css("bottom", "0");
    return false;
});
$('.footer .contactformbox').click(function(){
    $(".footer .contactformbox").slideToggle({
        direction: "up"
    }, 300).css("bottom", "-328px");

});

<强> JS / jQuery的：

<div class="footer">
    <div class="contactformbox form-body">
        <div class="sectionbar">Contact Us</div>
        <div class="form"></div>
    </div>
</div>

请注意，您必须点击标题栏（var ff = $('.contactformbox .form'); $(".footer .contactformbox .sectionbar").click(function () { if( ff.hasClass("toggled") ) { $(ff).animate({"height": "0px"}).removeClass("toggled"); } else { ff.animate({"height": "368px"}).addClass("toggled"); } });）才能关闭。

Answer 3

尝试使用.animate()设置，重置选择器css的{{1}} bottom属性

＆＃13;

".footer .contactformbox"

＆＃13;

jQuery(document).ready(function() {
  var elem = jQuery(".footer .contactformbox")
  jQuery(".footer .contactformbox .sectionbar").click(function(e) {
    elem.animate({bottom: elem.css("bottom") === "-328px" ? "+=125" : "-328px"}
    , 200, "linear")
  });
});

＆＃13;

.footer .contactformbox {
  background-color: #fff;
  border: 1px solid #000;
  bottom: -328px;
  height: 368px;
  width: 300px;
  position: fixed;
  display: block !important;
  right: 15px;
  z-index: 999999;
  border-radius: 6px 6px 0 0;
  -moz-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
  -webkit-transition: all .2s ease-in;
}
.footer .contactformbox .sectionbar {
  background-color: #000;
  color: #fff;
  display: block;
  margin: 0 0 20px;
  padding: 10px 0;
  bottom: 0px;
}

＆＃13;

jsfiddle http://jsfiddle.net/0Lddfpsy/3/

固定底部滑动切换不返回原始位置

3 个答案: