Hallo zusammen
Ich möchte Iquery, Iquery ui einbinden.
Ich habe dies meines erachtens getan.
Ich versuche einen Schalter zu machen, dessen Knopf sich bewegt, wenn ich draufdrücke.
Ich habe Ihn nun erstellt, leider reagiert er überhaupt nicht, obwohl ich glaube alles richtig gemacht zu haben.
Vielen Dank schon mal im Voraus. Java Datei ist im selben Ordner, Pfad sollte also stimmen..
Hier der Code:
HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<link type="text/css" href="CSS/test.css" rel="stylesheet"
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript"src="https://code.jquery.com/jquery-1.12.4.min.js"> </script>
<script type="text/javascript"src="https://code.jquery.com/ui/1.12.0-rc.2/jquery-ui.min.js"></script>
</head>
<div class="schalter">
<a class="links">AN</a>
<a class="rechts">AUS</a>
<div class="switch"></div>
</div>
</body>
</html>
CSS
.schalter {
margin-left:200px;
margin-top:150px;
width:300px;
height:200px;
background-color:gray;
font-family:arial;
color:white;
font-weight:bold;
position:relative;
-webkit-user-select:none;
border-radius:200px;
overflow:hidden;
}
.links {
margin-left:30px;
line-height:200px;
}
.rechts {
float:right;
line-height:200px;
margin-right:30px;
}
.switch {
height:200px;
width:200px;
background-color:lightgray;
position:absolute;
top:0px;
left:0px;
border-radius:100%;}
JAVA
$(".schalter").click(function(){
if($(".switch").css("left")=="0px"){
$(".switch").animate({
right:"0px",
left:"100px"
},150);
$(".schalter").animate({
backgroundColor:"#2ECC71"
},150);
} else {
$(".switch").animate({
left:"0px",
right:"100px"
},150);
$(".schalter").animate({
backgroundColor:"#EF4836"
},150);
}
});