不觸發動畫的按鈕

我正在使用iPhone模擬器，但在觸發按鈕動畫時遇到問題。不觸發動畫的按鈕

<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>

我希望按鈕縮小.box，但我不知道怎麼辦。

任何人都可以幫助我嗎？

來源

2016-04-05 Yannick Mackor

予分離的代碼，以不同的部分（HTML，CSS &的Javascript）然後，我改變左側和頂部位置在.box-change類爲0

另外除去#divscreen元件上的重複的梯度。

$(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>

來源

2016-04-05 13:35:30 dimshik

感謝，它的工作原理 –

但者均基於#divscreen是故意的，但我可以再次把它放在自己。 –

@YannickMackor偉大:)如果你標記答案是正確的，如果它有幫助，將不勝感激。 – dimshik

的問題是，您加載內容到DOM之前加載了jQuery功能。您只需在HTML之後移動腳本或在頁面加載時加載腳本即可解決該問題。

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

，或者你可以準備好網頁後調用一個負載

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

來源

2016-04-05 14:07:29 Narxx

對不起，我還在學習。你能把它翻譯成_noobish_嗎？ –

不觸發動畫的按鈕

回答

相關問題