重複jQuery代碼和adepting

Question

這是我的代碼：

var flag=true; 
$(document).ready(function(){ 
    $("glavna").mouseenter(function(){ 
     if(flag) 
     { 
      $(".ocenjevanje").animate({right:"+=440", bottom:"+=20"},1000); 
      $(".svetovanje").animate({right:"+=440", top:"+=140"},1000); 
      $(".onas").animate({left:"+=440", top:"+160"},1000); 
      $(".infotocka").animate({left:"+=440", bottom:"+=3"},1000); 
      flag=false; 
     } 
    }); 
}); 

var bannana=true; 
$(document).ready(function(){ 
    $(".glavna").click(function(){ 
     if(bannana) 
     { 
      $(".ocenjevanje").animate({right:"-=440", bottom:"-=200"},1000); 
      $(".svetovanje").animate({right:"-=440", top:"-=140"},1000); 
      $(".onas").animate({left:"-=440", top:"-=150"},1000); 
      $(".infotocka").animate({left:"-=440", bottom:"-190"},1000); 
      bannana=false; 
     } 
    }); 
}); 

這將移動卡我在頁面中間與懸停在主卡的側面和返回他們點擊。但問題是我只能這樣做一次（只有一次懸停和點擊....之後，它什麼都不做）。我怎樣才能使代碼，所以我將能夠重複這一行動？我如何在所有屏幕尺寸上嫺熟jQuery，因此無論它的尺寸如何，顯卡都將始終位於屏幕的角落？最後一件事情是，沒有任何理由，進入頂級動畫的卡片有點不同。他們不像起始位置那樣從底部開始，而是在對角線動畫前輕微移動。我該如何解決這個問題？ 如果需要的話這裏是完整的代碼（CSS和HTML）：http://jsfiddle.net/kkdpw/

Answer 1

你需要在事件發生後改變國旗和香蕉回真/假..

var flag=true; 
$(document).ready(function(){ 
$(".glavna").mouseenter(function(){ 
    if(flag) 
    { 
    $(".ocenjevanje").animate({right:"+=440", bottom:"+=20"},1000); 
    $(".svetovanje").animate({right:"+=440", top:"+=140"},1000); 
    $(".onas").animate({left:"+=440", top:"+160"},1000); 
    $(".infotocka").animate({left:"+=440", bottom:"+=3"},1000); 
    flag=false; 
     bannana = true; 
    } 

}); 
}); 

var bannana=true; 
$(document).ready(function(){ 
$(".glavna").click(function(){ 
    if(bannana) 
    { 
    $(".ocenjevanje").animate({right:"-=440", bottom:"-=200"},1000); 
    $(".svetovanje").animate({right:"-=440", top:"-=140"},1000); 
    $(".onas").animate({left:"-=440", top:"-=150"},1000); 
    $(".infotocka").animate({left:"-=440", bottom:"-190"},1000); 
    bannana=false; 
     flag = true; 
    } 

}); 
}); 

fiddle here