Скользящий анимированный div назад, если пользователь нажимает на тело

Я создаю форму обратной связи. Описание проблемы приведено нижеСкользящий анимированный div назад, если пользователь нажимает на тело

Я хочу, чтобы div должен отступить назад, когда вы используете щелчок на body в любом месте, а также на свяжитесь с нами. Я так пробовал.

$(document).click(function() { 
    $('div.slider').animate({ 
     toggle: "width" 
    }, 1000, function() { 

    }); 
});

, но в этом случае ДИВ скользит вперед и назад, когда я пытаюсь click над этим. Я googled вокруг но вещь, где я застрял вокруг, как искать средство, которое ключевое слово описывает мою проблему Я не хочу этого. Добавление ссылки на мой код в этом Fiddle.

Ответ на этот вопрос дается Pete Спасибо Пит Ссылка на Fiddle is Here

источник

2013-11-20 Anonymous

Добавление события к клику документа означает, что он будет срабатывать, если вы щелкнете в любом месте документа - в том числе и в вашей форме, либо вам нужно отменить щелчок документа, когда отображается ваша форма, а затем переустановить его, когда он скрыт, или привязать событие click к чему-то еще, что не охватывает весь документ (что было бы лучшим решением, как в текущей форме, любые ссылки на клики также будут отображаться в форме) – Pete

Спасибо @Pete да, я понял, Но я хочу знать, как я могу это сделать в режиме «кодирования»? –

Возможно, когда вы откроете свой слайдер, вы можете добавить маска, которая сидит за слайдером, но покрывает весь экран, который затем можно привязать к событию клика, чтобы: [что-то вроде этого] (http://jsfiddle.net/peteng/cQswC/10 /) – Pete

Вот скрипт, который будет работать для вас: http://jsfiddle.net/aamir/cQswC/12/

$(document).ready(function(){ 
var animation = "155px"; 
$('div.right, .slider').click(function(e){e.stopPropagation();}); 
$('div.right').click(function(e){ 
    e.stopPropagation(); 
    $(this).animate({ 
     right:animation 
    },200,function(){ 
     if(animation === "155px") 
      animation = "-40px"; 
     else 
      animation = "155px"; 
     console.log("Animation Complete"); 
    }); 
    $('div.slider').animate({ 
     width:"toggle" 
    },200, function(){ 
     console.log("Slider Animation Complter"); 
    }); 
}); 

//catch the event and check if element clicked is not the toggle label 
$('html').click(function (e) { 
    if(animation =='155px') return; 
    if (!$('.right').is($(e.target))) { 
     $('.right').click(); 
    } 
});

});

источник

2013-11-20 15:36:32

Большое спасибо @Aamir –

Скользящий анимированный div назад, если пользователь нажимает на тело

ответ

Смежные вопросы