UploadI Я использую глификон из Bootstrap 3 на кнопке, которая вращается с помощью ключевого кадра CSS3, я хочу (.hide) этот класс, пока кнопка не будет нажата, тогда она появится/показать, и отступить ... оживить, как это происходит?Показать и скрыть класс (onClick)
Вот мой Fiddle:
http://jsfiddle.net/DannyJardine/8djrcwnb/4/
<span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
Upload</button>
Похоже, что вы используете AngularJS? в этом случае прочитать эту статью
вы можете использовать CSS для такого рода функциональности, и использовать JQuery в toggleClass свойство:
$('button').click(function() {
$('.togglable').toggleClass("active");
});button {
height: 50px; /*just some styling for the button*/
width: 50px;
border-radius: 50%;
background: red;
box-shadow: inset 2px 2px 10px white, inset -2px -2px 10px black;
outline: none;
}
.togglable {
font-size: 0;
height: 0;
width: 0;
transition: all 1s; /*speed of animation*/
transform-origin:center center;
text-align:center;
margin:0 auto;
}
.active {
font-size: 50px;
height: 50px;
width: 400px;
transform: rotate(720deg); /*multiple of 360 to ensure animation finishes 'straight'*/
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button></button>
<div class="togglable active">Press the red button to toggle me!!!</div>Фигурные его с помощью Показать п скрыть JQuery..Trial и Error
$(document).ready(function() {
$('.glyphicon-refresh-animate').hide();
});
$("button").click(function(){
$(".glyphicon-refresh-animate").show();
});
Спасибо за вас всю вашу помощь ...
жаль да, игнорирующие angularJs, там далеко, чтобы оставить это быть ... обновлено скрипку здесь ... Http: //jsfiddle.net/DannyJardine/8djrcwnb/ 2 /, его не мой код, так что abit miffed .. – 1966
попробуйте использовать jQuery http://api.jquery.com/toggleclass/ – Thorarins
спасибо за ваш комментарий, я пробовал jQuery Toggle, безрезультатно ... его просто вспыхивает .. но не скрывает – 1966