animieren Sie ein div-Element und erweitern Sie von der Mitte

Ich habe einen einfachen code, der erweitert, dass ein div horizontal und vertikal von der Mitte,
aber es erweitert nur den linken oder auf den Boden, ich will es erweitert, um beide Seiten(Links=50px, rechts=50px) oder (top=50px, unten=50px) von der Mitte mit insgesamt gleich 100 Pixel.
hier der code:

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
    background-color:#bca;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    border:1px solid green;
    padding:10px;
}
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="go">&raquo; Run</button>

<div id="block">Hello!</div>
<script>


$("#go").click(function(){
  $("#block").animate({
    width: "100px",
    height: "100px",
    opacity: 0.6,
  }, 1500 );
});
</script>

</body>

Danke.

InformationsquelleAutor vikenoshi | 2011-07-13

  1. 15

    Eigt?

    HTML

    <!DOCTYPE html>
<html>
<head>
</head>
<body>
    <button id="go">&raquo; Run</button>
    <div id="block">Hello!</div>
</body>

    CSS

    div {
    background-color:#bca;
    background: #fff;
    position: absolute;
    top: 0px;
    left: 0px;
    margin-left: 50%;
    margin-top: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    border:1px solid green;
    padding:10px;
}

    jQuery

    $("#go").click(function(){
    $("#block").animate({
        width: "100px",
        height: "100px",
        top: "-50px",
        left: "-50px",
        opacity: 0.6,
    }, 1500 );
});

    http://jsfiddle.net/theguywholikeslinux/87f4Y/

    Ich verwendet, margin-left und margin-top für die Zentrierung und animierten die top: und left: Werte, um das Feld aufwachsen und Links sowie nach rechts und nach unten.

    Müssen Sie möglicherweise einige zusätzliche CSS-wenn Sie möchten, dass die "Hallo" zu bleiben in der Mitte der box als auch.

    Wow, das ist cool, das ist alles, was ich will! Danke, Sie meinen Tag gerettet~
    wenn Sie drücken Sie die Häkchen-Schaltfläche neben dem up-und down-Pfeile, so können Sie markieren, meine Antwort als "akzeptiert" und jeder wird wissen, dass Ihr problem gelöst wurde und was die Lösung war.

    InformationsquelleAutor angrydust

Schreibe einen Kommentar