JQuery 1 单击触发 2 个条件（如果）

Question

$('.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.. 然后动画开始（淡入）。然后它应该停止...然后用户单击文档上的任何位置，第二个动画（淡出）应该开始。 - 但这不起作用..因为当我单击 Div 时，淡入动画开始，然后第二个动画立即开始。没有停止..请帮助我如何解决这个问题。

Answer 1

原因是当您单击 div 时，单击事件会冒泡到文档级别。

您要使用的是事件的 stopPropagation 方法：

$("#yourdiv").click(function(event){
   alert("Your div clicked"); 
   event.stopPropagation();
});

Answer 2

对于 div 上的点击事件： http://api.jquery.com/event.stopPropagation/< /a>.它将阻止事件冒泡到文档级别。

Answer 3

我相信你的问题在于你正在约束你的事实
一次性点击事件的动画。因此，你点击div，它是
动画触发了，但同时你也触发了点击
$(document) 上的事件，这就是您注意到堆叠的原因
发生。

为了缓解这个问题，我将 .click() 事件的注册移至
将 $(document) 放入 div 的点击事件中，并删除了需要
一旦文档的点击事件被触发，就有 clickc 标志
它负责解除自身的绑定。

这种方法可能出现的一个问题是，如果用户
再次点击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');
            }
        });
    }
});