CODEWITHSUNDEEP
jqueryjquery-animatehotkeys
denislexic
denislexic

Reputation: 11362

Jquery hotkeys - on keypress it does the action several times

I'm using the jquery plugin hotkeys for an event to minimize a div through a trigger click action. But it seems like the action is repeated several times. Here is some code

   $(document).bind('keydown', 'Alt+m', function(e){
        $('#min_right_column').trigger('click');
        e.preventDefault();
    });

    // Column minimizer
    $('#min_right_column').click(function(){

        $('#right_column').animate({
            width: 'toggle'
        });

        if($(this).hasClass('min_right_column_normal')){
            // for the button
            $(this).removeClass('min_right_column_normal');
            $(this).addClass('min_right_column_reverse');

            // for the left column
            $('#left_column').addClass('left_column_full');
            $('.text').addClass('text_full');
            $('.story_right_column').addClass('text_full');

        } else {
            // for the button
            $(this).removeClass('min_right_column_reverse');
            $(this).addClass('min_right_column_normal');

            // for the left column
            $('#left_column').removeClass('left_column_full');
            $('.text').removeClass('text_full');
            $('.story_right_column').removeClass('text_full');
        }
    });

The action works, the #left_column add class is fine. But the #right_column animate width is repeating 3 times and then stopping. Why is it doing that and how can I stop it. Another point worth mentioning is that the normal click button to #min_right_column works fine. The issue only happens with the hotkey action.

Thanks for any help.

Upvotes: 0

Views: 327

Answers (1)

panupan
panupan

Reputation: 1242

Have you tried putting the .animate call at the end? This could be a browser thing where if it's animating and the class changes it could get confused. The code looks fine to me otherwise.

Also, I would consider using .toggleClass() to toggle your class names.

Upvotes: 1

Related Questions