Button löst keine Animation aus

Ich arbeite an einem iPhone Simulator, aber ich habe ein Problem beim Auslösen einer Animation mit Tasten.Button löst keine Animation aus

<html> 
 
<head> 
 
<script src="jquery-1.12.0.min.js"> 
 
$(function() { 
 
\t $("#divhomebttn").click(function() { 
 
\t \t $(".box").toggleClass("box-change"); 
 
\t }); 
 
}); 
 
</script> 
 
<style type="text/css"> 
 
#divoff { 
 
\t position: absolute; 
 
\t top:-2px; 
 
\t left:160px; 
 
\t background-color: #dddddd; 
 
\t width: 30px; 
 
\t height: 2px; 
 
\t border-radius: 1px 1px 0px 0px; 
 
} 
 

 
#divsilent { 
 
\t position: absolute; 
 
\t top:44px; 
 
\t left:-2px; 
 
\t background-color: #dddddd; 
 
\t width: 2px; 
 
\t height: 20px; 
 
\t border-radius: 1px 0px 0px 1px; 
 
} 
 

 
#divplus { 
 
\t position: absolute; 
 
\t top:79px; 
 
\t left:-2px; 
 
\t background-color: #dddddd; 
 
\t width: 2px; 
 
\t height: 15px; 
 
\t border-radius: 2px 0px 0px 2px; 
 
} 
 

 
#divminus { 
 
\t position: absolute; 
 
\t top:112px; 
 
\t left:-2px; 
 
\t background-color: #dddddd; 
 
\t width: 2px; 
 
\t height: 15px; 
 
\t border-radius: 2px 0px 0px 2px; 
 
} 
 

 
#divcase { 
 
\t position: relative; 
 
\t top:0px; 
 
\t left:10px; 
 
\t width: 232px; 
 
\t height: 460px; 
 
\t background-color: #eeeeee; 
 
\t border: 0px solid #ffffff; 
 
\t border-radius: 32px; 
 
} 
 

 
#divsensor { 
 
\t position: absolute; 
 
\t top:16px; 
 
\t left:106px; 
 
\t width: 20px; 
 
\t height: 2px; 
 
\t background-color: #000000; 
 
\t border: 1px solid #000000; 
 
\t border-radius: 20px; 
 
} 
 

 
#divspeaker { 
 
\t position: absolute; 
 
\t top:36px; 
 
\t left:97px; 
 
\t width: 38px; 
 
\t height: 2px; 
 
\t background-color: #444444; 
 
\t border: 1px solid #444444; 
 
\t border-radius: 20px; 
 
} 
 

 
#divcam { 
 
\t position: absolute; 
 
\t top:32px; 
 
\t left:72px; 
 
\t width: 9px; 
 
\t height: 9px; 
 
\t background-color: #111111; 
 
\t border: 1px solid #111111; 
 
\t border-radius: 20px; 
 
} 
 

 
#divglass { 
 
\t position: absolute; 
 
\t top:76px; 
 
\t left:12px; 
 
\t width: 208px; 
 
\t height: 308px; 
 
\t background-color: black; 
 
\t border: 0px solid black; 
 
\t border-radius: 2px; 
 
} 
 

 
#divscreen { 
 
\t position: absolute; 
 
\t top:2px; 
 
\t left:2px; 
 
\t width: 204px; 
 
\t height: 304px; 
 
\t background: linear-gradient(bottom right, #00ee00, #6beb00, #00ee00, #6beb00, #00ee00, #0d80ee, #00eeee, #00dddd, #00eeee, #0d80ee, #00eeee, #00dddd, #00eeee, #00dddd, #00eeee, #00eeee, #00dddd); 
 
\t background: -webkit-linear-gradient(bottom right, #00ee00, #6beb00, #00ee00, #6beb00, #00ee00, #0d80ee, #00eeee, #00dddd, #00eeee, #0d80ee, #00eeee, #00dddd, #00eeee, #00dddd, #00eeee, #00eeee, #00dddd); 
 
\t background: -o-linear-gradient(bottom right, #00ee00, #6beb00, #00ee00, #6beb00, #00ee00, #0d80ee, #00eeee, #00dddd, #00eeee, #0d80ee, #00eeee, #00dddd, #00eeee, #00dddd, #00eeee, #00eeee, #00dddd); 
 
\t background: -moz-linear-gradient(bottom right, #00ee00, #6beb00, #00ee00, #6beb00, #00ee00, #0d80ee, #00eeee, #00dddd, #00eeee, #0d80ee, #00eeee, #00dddd, #00eeee, #00dddd, #00eeee, #00eeee, #00dddd); 
 
\t border: 0px solid #111111; 
 
\t border-radius: 0px; 
 
} 
 

 
.box { 
 
\t position: absolute; 
 
\t top:0px; 
 
\t left:0px; 
 
\t width: 204px; 
 
\t height: 304px; 
 
\t background: linear-gradient(bottom right, lime, lawnGreen, lime, lawnGreen, lime, dodgerBlue, aqua, #00eeee, aqua, dodgerBlue, aqua, #00eeee, aqua, #00eeee, aqua, aqua, #00eeee); 
 
\t background: -webkit-linear-gradient(bottom right, lime, lawnGreen, lime, lawnGreen, lime, dodgerBlue, aqua, #00eeee, aqua, dodgerBlue, aqua, #00eeee, aqua, #00eeee, aqua, aqua, #00eeee); 
 
\t background: -o-linear-gradient(bottom right, lime, lawnGreen, lime, lawnGreen, lime, dodgerBlue, aqua, #00eeee, aqua, dodgerBlue, aqua, #00eeee, aqua, #00eeee, aqua, aqua, #00eeee); 
 
\t background: -moz-linear-gradient(bottom right, lime, lawnGreen, lime, lawnGreen, lime, dodgerBlue, aqua, #00eeee, aqua, dodgerBlue, aqua, #00eeee, aqua, #00eeee, aqua, aqua, #00eeee); 
 
\t border: 0px solid #111111; 
 
\t border-radius: 0px; 
 
\t -webkit-transition: width 2s ease, height 2s ease; 
 
\t -moz-transition: width 2s ease, height 2s ease; 
 
\t -o-transition: width 2s ease, height 2s ease; 
 
\t transition: width 2s ease, height 2s ease; 
 
} 
 

 
.box-change { 
 
\t top:50%; 
 
\t left:50%; 
 
\t width: 2px; 
 
\t height: 3px; 
 
} 
 

 
#divhomebttn { 
 
\t position: absolute; 
 
\t bottom:20px; 
 
\t left:94px; 
 
\t width: 40px; 
 
\t height: 40px; 
 
\t background-color: #eeeeee; 
 
\t border: 1px solid #bbbbbb; 
 
\t border-radius: 30px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<div id="divcase"> 
 
<div id="divoff"> 
 
</div> 
 
<div id="divsilent"> 
 
</div> 
 
<div id="divplus"> 
 
</div> 
 
<div id="divminus"> 
 
</div> 
 
<div id="divsensor"> 
 
</div> 
 
<div id="divspeaker"> 
 
</div> 
 
<div id="divcam"> 
 
</div> 
 
<div id="divglass"> 
 
    <div id="divscreen"> 
 
    <div class="box"> 
 
    </div> 
 
    </div> 
 
</div> 
 
<input type="button" value="" id="divhomebttn"> 
 
</div> 
 
</body> 
 
</html>

Ich möchte die Taste, um die .box schrumpfen, aber ich weiß nicht, wie.

Kann mir jemand dabei helfen?

Quelle

2016-04-05 Yannick Mackor

getrennt ich den Code zu den verschiedenen Abschnitten (HTML, CSS & Javascript) Dann änderte ich die linke und die Spitzenposition in der .box-change Klasse auf 0

Auch die duplizierte Gradienten auf dem #divscreen Element entfernt.

$(function() { 
 
    $("#divhomebttn").click(function() { 
 
    $(".box").toggleClass("box-change"); 
 
    }); 
 
});

#divoff { 
 
    position: absolute; 
 
    top: -2px; 
 
    left: 160px; 
 
    background-color: #dddddd; 
 
    width: 30px; 
 
    height: 2px; 
 
    border-radius: 1px 1px 0px 0px; 
 
} 
 
#divsilent { 
 
    position: absolute; 
 
    top: 44px; 
 
    left: -2px; 
 
    background-color: #dddddd; 
 
    width: 2px; 
 
    height: 20px; 
 
    border-radius: 1px 0px 0px 1px; 
 
} 
 
#divplus { 
 
    position: absolute; 
 
    top: 79px; 
 
    left: -2px; 
 
    background-color: #dddddd; 
 
    width: 2px; 
 
    height: 15px; 
 
    border-radius: 2px 0px 0px 2px; 
 
} 
 
#divminus { 
 
    position: absolute; 
 
    top: 112px; 
 
    left: -2px; 
 
    background-color: #dddddd; 
 
    width: 2px; 
 
    height: 15px; 
 
    border-radius: 2px 0px 0px 2px; 
 
} 
 
#divcase { 
 
    position: relative; 
 
    top: 0px; 
 
    left: 10px; 
 
    width: 232px; 
 
    height: 460px; 
 
    background-color: #eeeeee; 
 
    border: 0px solid #ffffff; 
 
    border-radius: 32px; 
 
} 
 
#divsensor { 
 
    position: absolute; 
 
    top: 16px; 
 
    left: 106px; 
 
    width: 20px; 
 
    height: 2px; 
 
    background-color: #000000; 
 
    border: 1px solid #000000; 
 
    border-radius: 20px; 
 
} 
 
#divspeaker { 
 
    position: absolute; 
 
    top: 36px; 
 
    left: 97px; 
 
    width: 38px; 
 
    height: 2px; 
 
    background-color: #444444; 
 
    border: 1px solid #444444; 
 
    border-radius: 20px; 
 
} 
 
#divcam { 
 
    position: absolute; 
 
    top: 32px; 
 
    left: 72px; 
 
    width: 9px; 
 
    height: 9px; 
 
    background-color: #111111; 
 
    border: 1px solid #111111; 
 
    border-radius: 20px; 
 
} 
 
#divglass { 
 
    position: absolute; 
 
    top: 76px; 
 
    left: 12px; 
 
    width: 208px; 
 
    height: 308px; 
 
    background-color: black; 
 
    border: 0px solid black; 
 
    border-radius: 2px; 
 
} 
 
#divscreen { 
 
    position: absolute; 
 
    top: 2px; 
 
    left: 2px; 
 
    width: 204px; 
 
    height: 304px; 
 
    border: 0px solid #111111; 
 
    border-radius: 0px; 
 
} 
 
.box { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 204px; 
 
    height: 304px; 
 
    background: linear-gradient(bottom right, lime, lawnGreen, lime, lawnGreen, lime, dodgerBlue, aqua, #00eeee, aqua, dodgerBlue, aqua, #00eeee, aqua, #00eeee, aqua, aqua, #00eeee); 
 
    background: -webkit-linear-gradient(bottom right, lime, lawnGreen, lime, lawnGreen, lime, dodgerBlue, aqua, #00eeee, aqua, dodgerBlue, aqua, #00eeee, aqua, #00eeee, aqua, aqua, #00eeee); 
 
    background: -o-linear-gradient(bottom right, lime, lawnGreen, lime, lawnGreen, lime, dodgerBlue, aqua, #00eeee, aqua, dodgerBlue, aqua, #00eeee, aqua, #00eeee, aqua, aqua, #00eeee); 
 
    background: -moz-linear-gradient(bottom right, lime, lawnGreen, lime, lawnGreen, lime, dodgerBlue, aqua, #00eeee, aqua, dodgerBlue, aqua, #00eeee, aqua, #00eeee, aqua, aqua, #00eeee); 
 
    border: 0px solid #111111; 
 
    border-radius: 0px; 
 
    -webkit-transition: width 2s ease, height 2s ease; 
 
    -moz-transition: width 2s ease, height 2s ease; 
 
    -o-transition: width 2s ease, height 2s ease; 
 
    transition: width 2s ease, height 2s ease; 
 
} 
 
.box-change { 
 
    top: 0; 
 
    left: 0; 
 
    width: 2px; 
 
    height: 3px; 
 
} 
 
#divhomebttn { 
 
    position: absolute; 
 
    bottom: 20px; 
 
    left: 94px; 
 
    width: 40px; 
 
    height: 40px; 
 
    background-color: #eeeeee; 
 
    border: 1px solid #bbbbbb; 
 
    border-radius: 30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="divcase"> 
 
    <div id="divoff"> 
 
    </div> 
 
    <div id="divsilent"> 
 
    </div> 
 
    <div id="divplus"> 
 
    </div> 
 
    <div id="divminus"> 
 
    </div> 
 
    <div id="divsensor"> 
 
    </div> 
 
    <div id="divspeaker"> 
 
    </div> 
 
    <div id="divcam"> 
 
    </div> 
 
    <div id="divglass"> 
 
    <div id="divscreen"> 
 
     <div class="box"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <input type="button" value="" id="divhomebttn"> 
 
</div>

Quelle

2016-04-05 13:35:30 dimshik

Dank nennen, es funktioniert –

aber btw die #divscreen war absichtlich, aber ich kann es mir wieder einsetzen. –

@YannickMackor Großartig :) Würde mich freuen, wenn Sie die Antwort als richtig markieren, wenn es geholfen hat. – dimshik

Das Problem war, dass Sie die jQuery-Funktion vor dem Laden der Elemente auf das DOM geladen. Alles, was Sie tun müssen, um das zu beheben, ist entweder das Skript nach dem HTML-Code zu verschieben oder es beim Laden der Seite zu laden.

<head> ... </head> 
<body> <all your html here> 
    <script> 
    $(function() { 
     $("#divhomebttn").click(function() { 
     $(".box").toggleClass("box-change"); 
     }); 
    }); 
    </script> 
</body>

oder Sie können eine Last nach Seite bereit

<head> ... 
<script> 
    $(document).ready(function() { 
    $("#divhomebttn").click(function() { 
     $(".box").toggleClass("box-change"); 
    }); 
    }); 
</script> 
</head> 
<body> ... </body>

Quelle

2016-04-05 14:07:29 Narxx

Sorry, ich lerne immer noch. Könnten Sie das bitte in _noobish_ übersetzen? –

Button löst keine Animation aus

Antwort

Verwandte Themen