У меня есть веб-страница, где я могу перемещаться со стрелками по горизонтали. Я хотел бы добавить эффект, когда вы нажимаете на стрелки, размер его уменьшает на 10% и восстанавливает его нормальный размер на следующем слайде. С зависанием он работает, но не с onclick. Я предпочитаю использовать на клике, потому что боюсь, что зависание, которое не работает на планшете. Не могли бы вы рассказать мне, что я делаю неправильно в сценарии?
<a href="#1" title="next" class="flscroll" id="flscrolld"></a>
здесь мой css:
#flscrolld {
background: url(images/sprite2.png) no-repeat left -200px;
padding-right: 50px;
right: -30px;
width: 53px;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
}
.transition {
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
-o-transform: scale(0.6);
transform: scale(0.6);
}
Мой сценарий Jquery:
$(document).ready(function() {
$("#flscrolld" ).click(function() {
$("#flscrolld").toggleClass('transition');
}, function() {
$("#flscrolld").removeClass('transition');
});
});
click
имеет только один обратный вызов, а toggleClass
делает именно то, что он звучит, он переключает класс, поэтому вам нужен только один обратный вызов
$(document).ready(function() {
$("#flscrolld" ).click(function() {
$(this).toggleClass('transition');
});
});