2016-08-23 3 views
0

Ich versuche, eine Taste zu haben, die Sie in der Mitte drücken, die alle Elemente in einem div schieben wird.JQuery-Klick-Methode funktioniert nicht

$(document).ready(function() { 
 
    $("#imgs").click(function() { 
 
    $("#start").animate({ 
 
     bottom: "+=250px" 
 
    }, "slow"); 
 
    }); 
 
});
#imgs { 
 
    display: block; 
 
    margin: 0 auto; 
 
    opacity: 1.0; 
 
    filter: alpha(opacity=100); 
 
    -webkit-transition: all 1s ease; 
 
    -moz-transition: all 1s ease; 
 
    -ms-transition: all 1s ease; 
 
    -o-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
    bottom: 0px; 
 
} 
 
#imgs:hover { 
 
    opacity: 1; 
 
    filter: alpha(opacity=100); 
 
    transform: scale(1.2); 
 
    -webkit-transform: scale(1.2); 
 
    -moz-transform: scale(1.2); 
 
    -ms-transform: scale(1.2); 
 
    -o-transform: scale(1.2); 
 
} 
 
html { 
 
    width: 100%; 
 
    height: 100%; 
 
    clip: auto; 
 
    position: absolute; 
 
    overflow-x: hidden; 
 
    overflow-y: hidden; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<body style="margin:0;"> 
 

 
    <div id="start" style="bottom:0px"> 
 
    <img src="saint die.jpg" style=" z-index:-20; width:150%; position:absolute"> 
 
    <div align="center" style="bottom:69%; position:absolute; width:45%; left:28%; ;"> 
 
     <img src="DELICETEXT.png" alt="delice" style="width:100%"> 
 
    </div> 
 
    <div id="imgs" align="center" style="position:absolute; width:25%; height: 25%; left:38%; top:30%;"> 
 
     <img src="delice.png" alt="L'arbre a Delices" style="width:100%; position: relative;"> 
 
    </div> 
 
    </div> 
 
</body>

Wenn ich über die Taste/Bild schweben, vergrößert es wie erwartet. Es passiert jedoch nichts, wenn ich darauf klicke. Ich habe keine Fehler in der Konsole gesehen, und die Suche nach Google ergab nichts.

Wie kann ich das beheben?

+1

Sie verwenden 'bottom', aber geben nie eine Art von' position' in Ihrem CSS. Überprüfen Sie, ob der Wert selbst in der Konsole oder im Inspektor geändert wird. –

Antwort

1

Sie haben eine Position zu einem Element spezifizieren animieren, damit sie bewegen, wenn Sie animieren die top, right, bottom oder left Eigenschaften:

<div id="start" style="bottom:0px; position:relative;"> 

Per der .animate() documentation:

Richtungseigenschaften (top, right, bottom, left) haben keine erkennbaren Auswirkungen auf Elemente, wenn Ihre position Stil-Eigenschaft ist static, die ist es standardmäßig.

+0

der Schlüssel hier ist die Position: relativ, dass ich vergessen habe, in meinem # start div –

Verwandte Themen