JQuery 1 Click запускает 2 условия (если) - PullRequest
Новая
       18

JQuery 1 Click запускает 2 условия (если)

0 голосов
/ 02 декабря 2010 
$('.anfahrt').click(function() {
    $button = $(this);
    if ( clickedc == 0){
        if( !$button.hasClass( 'disabled' ) ) {
            $button.addClass( 'disabled' );
            clickedc = 1
            $('.lupe').animate({opacity: '0'},750)
            $('.card > img').animate({height: 150, width: 193, opacity: '1', left: 0, top: 9},500)
            $('.contact-content2').animate({opacity:'1'},500).animate({opacity: '0'},500)
            $('.cardgreen > img').animate({height:150, width: 193, opacity: '0'},500).animate({opacity: '1', top: 9},500,
            function() { $button.removeClass('disabled') }
            );
        } 
    }
});

$(document).(click(function() {
    $button = $(this);
    if ( clickedc == 1){
        if( !$button.hasClass( 'disabled' ) ) {
            $button.addClass( 'disabled' );
            clickedc = 0
            $('.cardgreen > img').animate({opacity: '0'},300).animate({height:0,width:0});
            $('.contact-content2').show(0).animate({opacity: '1'},300)
            $('.clickding').animate({width: '0', height: '0'},0)
            $('.card > img').animate({opacity: '1'},300)
                .animate({opacity: '0', width: 0, height: 0, left:194, top:75},270,
            function() { $button.removeClass('disabled') }
            );
        } 
    }
}));

Итак, я нажимаю на div .. и начинается анимация (fadein). Затем он должен остановиться ... Затем пользователь щелкает повсюду на документе, и 2-я анимация (исчезновение) должна начаться. - Но это не работает .. потому что когда я нажимаю Div, анимация затухания начинается после того, как вторая анимация начинается сразу же. Theres no stop .. Пожалуйста, помогите мне, как это исправить.

Ответы [ 3 ]

4 голосов
/ 02 декабря 2010

Причина этого заключается в том, что при нажатии div.

событие щелчка всплывает до уровня документа, и вы хотите использовать метод stopPropagation всобытие: 

$("#yourdiv").click(function(event){
   alert("Your div clicked"); 
   event.stopPropagation();
});
1 голос
/ 02 декабря 2010

Для события click на div do: http://api.jquery.com/event.stopPropagation/. Это остановит всплытие события до уровня документа.

0 голосов
/ 02 декабря 2010

Я полагаю, что ваша проблема заключается в том факте, что вы привязываете свои анимации к событиям кликов одновременно.Таким образом, вы нажимаете div, запускается анимация, но в то же время вы также запускаете событие click на $(document), и поэтому вы замечаете, что происходит наложение.

Чтобы облегчить это, я перенес регистрациюсобытия .click() на $(document) в событие щелчка элемента div и устраняется необходимость иметь флаг clickc, так как после запуска события щелчка в документе он сам снимает привязку.

OneПроблема, которая может возникнуть при таком подходе, заключается в том, что если пользователь снова щелкнет по div, анимация снова произойдет.Но я оставляю это вам в качестве упражнения.

Это решение не проверено. 

function open_animation () {
    $('.lupe').animate({opacity: '0'},750)
    $('.card > img').animate({height: 150, width: 193, opacity: '1', left: 0, top: 9},500)
    $('.contact-content2').animate({opacity:'1'},500).animate({opacity: '0'},500)
    $('.cardgreen > img').animate({height:150, width: 193, opacity: '0'},500).animate({opacity: '1', top: 9},500, function() { $button.removeClass('disabled') });
}

function close_animation () {
    $('.cardgreen > img').animate({opacity: '0'},300).animate({height:0,width:0});
    $('.contact-content2').show(0).animate({opacity: '1'},300)
    $('.clickding').animate({width: '0', height: '0'},0)
    $('.card > img').animate({opacity: '1'},300).animate({opacity: '0', width: 0, height: 0, left:194, top:75},270, function() { $button.removeClass('disabled')});
}

$('.anfahrt').click(function() {
    $button = $(this);
    if( !$button.hasClass( 'disabled' ) ) {
        $button.addClass( 'disabled' );
        open_animation()
        $(document).click(function() {
            $button = $('.anfahrt');
            if( !$button.hasClass( 'disabled' ) ) {
                $button.addClass( 'disabled' );
                close_animation();
                $(document).unbind('click');
            }
        });
    }
});
...