Question

下面是我的代码：

HTML：

<div>
    <div id="div1">12345</div>
    <div id="div2">67890</div>
    <div id="div3"><a href="#" id="slide">abcde</a></div>
    <div id="pad" style="display:none;">1234567890</div> 
</div>

的CSS：

#div1{width: 150px; height:50px; background-color: red;}
#div2{width: 150px; height:100px; background-color: yellow;}
#div3, #pad{width: 150px; height:20px; background-color: grey;}
#pad{height: 50px;}

JS：

        $("#slide").click(function(e) {
         e.preventDefault();
          if($("#div2").hasClass("toggled")) {
             $("#div2").animate({"height": "100px"}, function() {
                 $("#pad").hide();}).removeClass("toggled"); 
          } 
          else {
            $("#div2").animate({"height": "40px"}, function() {
            $("#pad").show();}).addClass("toggled"); 
          }
       });

JSFIDDLE

当我按下链接时，灰色div会向上滑动。有点像用户按下链接时键盘向上滑动。

但它有点奇怪。 “pad”div仅在灰色div滑动后显示。它只会在滑下后隐藏起来。我想要的是“垫”有一个向上滑动和向下滑动的效果，如打开和关闭抽屉。有什么想法吗？

Answer 1

使用slideDown / Up显示import urllib import hashlib import hmac import base64 import urllib.request from wsgiref.handlers import format_date_time from datetime import datetime from time import mktime account_name='****' account_key='*****' account_container='***' file_name='**' file_path='**' request_url='https://myaccount.blob.core.windows.net/mycontainer/myblob?comp=appendblock' #https://myaccount.blob.core.windows.net/mycontainer/myblob?comp=appendblock Put blobLength=0 blockID='**' #create the authorization header #how to encode and decode signtostring def createAuthorizationHeader(canonicalizedString): storage_account_key = base64.b64decode(account_key) byte_canonicalizedString=canonicalizedString.encode('utf-8') signature = base64.b64encode(hmac.new(key=storage_account_key,msg=byte_canonicalizedString, digestmod=hashlib.sha256).digest()) print(signature) authorization_str="SharedKey "+account_name+":"+signature.decode('utf-8') print(authorization_str) return authorization_str #Construction Sign def constructSTS(http_verb,Content_Encoding='',Content_Language='',Content_MD5='',Content_Type='',Date='', If_Modified_Since='',If_Match='',If_None_Match='',length='', If_Unmodified_Since='',Range='',CanonicalizedHeaders='',CanonicalizedResource=''): StringToSign=http_verb+'\n'+Content_Encoding+'\n'+Content_Language+'\n'+Content_MD5+'\n'+Content_Type+'\n'+Date+'\n'+If_Modified_Since+'\n'+If_Match+'\n'+If_None_Match+'\n'+length+'\n'+If_Unmodified_Since+'\n'+Range+'\n'+CanonicalizedHeaders+CanonicalizedResource; print(StringToSign) return StringToSign #Construction Canonicalized headers def constructCanonicalizedHeaders(date): CanonicalizedHeader="x-ms-date:"+date+"\nx-ms-version:2015-02-21\nx-ms-lease-id:"+blockID+"\nms-blob-condition-appendpos:"+youroffset+"\nx-ms-blob-condition-maxsize:4194304\n" print(CanonicalizedHeader) return CanonicalizedHeader #Construction Canonicalized Resource def constructCanonicalizedResource(): canonicalizedResource="/"+account_name+"/"+account_container+"/"+file_name+"\ncomp:appendblock" print(canonicalizedResource) return canonicalizedResource #get current date def getCurrentDate(): now = datetime.now() stamp = mktime(now.timetuple()) date=format_date_time(stamp) return date #Create http request def createHttpRequest(): date=getCurrentDate() r=urllib.request.Request(request_url) canonicalizedString=constructSTS("PUT",CanonicalizedHeaders=constructCanonicalizedHeaders(date),CanonicalizedResource=constructCanonicalizedResource(),length=blobLength) print(canonicalizedString) r.add_header('x-ms-version','2015-02-21'); r.add_header('Authorization',createAuthorizationHeader(canonicalizedString)) r.add_header('x-ms-date',date) r.add_header('Content-Length',blobLength) r.add_header('x-ms-lease-id',blockID) r.add_header("x-ms-blob-condition-appendpos",youroffset) r.add_header("x-ms-blob-condition-maxsize",4194304)元素，不要等待幻灯片动画完成以启动pad的动画

pad

$("#slide").click(function(e) {
  e.preventDefault();
  if ($("#div2").hasClass("toggled")) {
    $("#div2").animate({
      "height": "100px"
    }).removeClass("toggled");
    $("#pad").slideUp();
  } else {
    $("#div2").animate({
      "height": "40px"
    }).addClass("toggled");
    $("#pad").slideDown();
  }
});

#div1 {
  width: 150px;
  height: 50px;
  background-color: red;
}
#div2 {
  width: 150px;
  height: 100px;
  background-color: yellow;
}
#div3,
#pad {
  width: 150px;
  height: 20px;
  background-color: grey;
}
#pad {
  height: 50px;
}

使用jquery animate的滑动效果

1 个答案: