Кнопка не запускает анимацию

Я работаю над симулятором 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 Great :) Был бы признателен, если бы вы отметили ответ как правильный, если бы это помогло. – dimshik

Проблема заключалась в том, что вы загрузили функцию JQuery перед загрузкой элементов в DOM. Все, что вам нужно сделать, чтобы исправить это, либо перемещает ваш скрипт после 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_, пожалуйста? –

Кнопка не запускает анимацию

ответ

Смежные вопросы