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 ..和动画开始（fadein）。然后它应该停止...然后用户点击文档的任何地方，第二个动画（淡出）应该开始。 - 但这不起作用..因为当我点击Div时，fadein动画开始后第二个动画立即开始。 Theres没有停止..请帮我解决这个问题。

Answer 1

这样做的原因是，当您点击div时，点击事件会冒泡到文档级别。

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

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

Answer 2

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

Answer 3

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

为了缓解这种情况，我移动了.click()事件的注册 $(document)进入div的click事件并删除了需要一旦文档的click事件被触发，就会有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');
            }
        });
    }
});

JQuery 1点击激发2个条件（如果）

3 个答案: