JQuery的格點閱格，並調用函數

Question

我有兩個問題，我的jQuery代碼。 第一個問題是，當我點擊的Redbox將縮小和開關位置，當我再次點擊一次切換位置，我不知道如何解決這個問題。

第二個問題是，當我單擊黑色close框時，它通過div單擊並單擊open（紅框）。

這裏是JSFiddle

Answer 1

這裏

http://jsfiddle.net/HQS8s/109/

您需要stopPropagation在你點擊關閉處理程序。如果你沒有這個停止做那麼點擊會泡到它運行的a_demo_threee該單擊處理程序代碼的DIV本身，這樣的位置得到改變。

您需要重置您的頂部和左側，因爲在div點擊處理程序總是這樣-80px從當前榜首的位置，這就是爲什麼它總是重新定位，越來越多的頂端左上角。現在我們重置它，以便它不會離開屏幕。

$(".a_demo_threee").click(function (e) { //opens the login 

    e.stopPropagation(); 
    if(!$(this).hasClass('open')) { 
     $(this).stop().animate({ 
      "width": "100%", 
      "height": "100%", 
      "top": "-=80px", 
      "left": "-=300px", 
     }, 1000).addClass('open'); 
    }  

    $("#contentlogin").show(); 
}); 

    $("#close").click(function (e) { 
     e.stopPropagation(); 
     $(".a_demo_threee").stop().animate({ 
      "width": "250px", 
      "height": "150px", 
      "top":"80px", 
      "left":"300px" 
     }, 1000).removeClass('open'); 

     $("#contentlogin").hide(); 
    }); 

Answer 2

移動出於.a_demo_threee。

嘗試：

HTML：

<a class="a_demo_threee"> 
    <div id="contentlogin"></div>  
    <div id="login"></div> 
</a> 
<div id="close">CLOSE</div> 

JS：

$("#contentlogin").hide(); 
$(".a_demo_threee").click(function (e) { 
    e.stopPropagation();  
    $(".a_demo_threee").stop().animate({ 
     "width": "100%", 
     "height": "100%", 
     "top": "-=80px", 
     "left": "-=300px", 
    }, 1000); 
    setTimeout(function(){ 
     $("#close").fadeIn(); 
    },800); 
    $("#contentlogin").show(); 
}); 
$("#close").click(function() {   
    $(".a_demo_threee").stop().animate({ 
     "width": "250px", 
     "height": "150px", 
     "top":"80px", //reset position 
     "left":"300px" 
    }, 1000); 
    $("#close").fadeOut(); 
    $("#contentlogin").hide(); 
}); 

Fiddle here.