Jquery toggleClass уменьшить размер изображения на клике

Question

Jquery toggleClass уменьшить размер изображения на клике

0

У меня есть веб-страница, где я могу перемещаться со стрелками по горизонтали. Я хотел бы добавить эффект, когда вы нажимаете на стрелки, размер его уменьшает на 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');


    });

});

user979974 01 май 2014, в 17:15

Источник

Теги:

jquery

image

reduce

toggle

image-size

1 ответ

Ещё вопросы

adeneo · Accepted Answer · 2014-05-01T13-49-00.000Z

0

Лучший ответ

click имеет только один обратный вызов, а toggleClass делает именно то, что он звучит, он переключает класс, поэтому вам нужен только один обратный вызов

$(document).ready(function() {
    $("#flscrolld" ).click(function() {
        $(this).toggleClass('transition');
    });
});

FIDDLE

adeneo 01 май 2014, в 13:49

0

Привет аденео, спасибо за вашу помощь. Если мне нужно, чтобы стрелка указывала на его обычный размер на следующем слайде, нужно ли использовать что-то еще, кроме toggleClass?
user979974 01 май 2014, в 15:16
0

Я понятия не имею, в каком контексте вы используете это, или каков следующий слайд, так что трудно сказать, что вы пытаетесь сделать?
adeneo 01 май 2014, в 15:22
0

Я хотел сделать что-то похожее на это, но с нажатием: $ (document) .ready (function () {$ ('# flscrolld'). Click (function () {$ ("# flscrolld"). AddClass ('transition) ');}, function () {$ ("# flscrolld"). removeClass (' transition ');});}); чтобы на новой странице стрелка указывала его нормальный размер. Ваш сценарий работает хорошо, но я хотел знать, когда я нажимаю на стрелку, он уменьшает его размер, а затем автоматически изменяет его размер, не нажимая на него еще раз. Как вы думаете, это возможно? Не знаю, ясно ли мне.
user979974 01 май 2014, в 15:28
0

Хм, нет, это не совсем возможно, по крайней мере, не так, как вы это описываете. Однако вы можете использовать таймер и сбросить стрелку после временной задержки, или использовать событие mouseleave, чтобы сбросить стрелку, когда мышь уходит, или любое другое количество возможностей.
adeneo 01 май 2014, в 15:30
0

Хорошо, большое спасибо Аденео за все эти советы. Я действительно ценю твою помощь.
user979974 01 май 2014, в 15:31

Показать ещё 3 комментария