Отменить привязку при нажатии - PullRequest
0 голосов
/ 19 ноября 2011

Учитывая этот код (#stage является тегом привязки с элементом div внутри него):

$('#stage').hover(

function() {
    var $this = $(this);
    $this.find('div').stop().animate({
        'width': '70px',
        'height': '139px',
        'top': '0px',
        'left': '-16px'
    }, 500);
}, function() {
    var $this = $(this);
    $this.find('div').stop().animate({
        'width': '35px',
        'height': '70px',
        'top': '0px',
        'left': '0px'
    }, 500);

});

(также находится в http://jsfiddle.net/fXp9U/1/)

При нажатии мне нужно остановитьссылка убирает меня со страницы с «return false» и устанавливает div как активный. Когда вы нажимаете, он больше не должен анимироваться, но должен иметь большой размер состояния при наведении.

Есливы удаляете событие щелчка, при котором работает указатель мыши.

Спасибо за вашу помощь еще раз.

Ответы [ 2 ]

1 голос
/ 19 ноября 2011

Вы можете использовать bind и unbind:

$('#stage').bind({
    'click': stage_onClick,
    'mouseenter': stage_onMouseEnter,
    'mouseleave': stage_onMouseLeave
});

function stage_onClick(event) {
    var $this = $(this);
    $this.unbind('mouseenter', stage_onMouseEnter);
    $this.unbind('mouseleave', stage_onMouseLeave);
    event.preventDefault();
}

function stage_onMouseEnter(event) {
    var $this = $(this);
    $this.find('div').stop().animate({
        'width': '70px',
        'height': '139px',
        'top': '0px',
        'left': '-16px'
    }, 500);
}

function stage_onMouseLeave(event) {
    var $this = $(this);
    $this.find('div').stop().animate({
        'width': '35px',
        'height': '70px',
        'top': '0px',
        'left': '0px'
    }, 500);
}
0 голосов
/ 19 ноября 2011

Чтобы отменить привязку события, используйте off() и для предотвращения действия ссылки по умолчанию (элемент #stage в связанной JS Fiddle (в теле вопроса) появляется быть a, не a div):

$('#stage').hover(
    function() {
        var $this = $(this);
        $this.find('div').stop().animate({
            'width': '70px',
            'height': '139px',
            'top': '0px',
            'left': '-16px'
        }, 500);
    }, function() {
        var $this = $(this);
        $this.find('div').stop().animate({
            'width': '35px',
            'height': '70px',
            'top': '0px',
            'left': '0px'
        }, 500);

    }).click(   
        function(e) {
            // prevents the default action of the link
            e.preventDefault();
            // animates the div element to the 'finished' position
            $(this)
            // unbinds the hover after a click
            .off('hover')
            // finds the child 'div' element, and prevents animation queueing
            // (just as it did in your original code)
            .find('div').stop()
            // animates the div element to the 'finished' position
            .animate({
                'width': '35px',
                'height': '70px',
                'top': '0px',
                'left': '0px'
            }, 500);
        });

Демонстрация JS Fiddle .

Ссылки:

...