重复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