JQuery 1 Click 触发 2 个条件（如果）答案

【问题标题】：JQuery 1 Click fires 2 conditions (if)JQuery 1 Click 触发 2 个条件（如果）
【发布时间】：2010-12-02 23:28:53
【问题描述】：

$('.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 时，淡入淡出动画开始，然后第二个动画立即开始。没有停止..请帮我解决这个问题。

【问题讨论】：

更严格地格式化您的代码可能有助于回答您的问题。 :)
有几个；到处失踪，这无济于事。此外，clickedc 实际上并没有在任何地方初始化，所以任何事情都可能发生。

标签： javascript jquery if-statement onclick document

【解决方案1】：

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

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

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

【讨论】：

Webkit 和 IE6 不喜欢 event.stopPropagation();

【解决方案2】：

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

【讨论】：

【解决方案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');
            }
        });
    }
});

【讨论】：