CODEWITHSUNDEEP
jquery
Urrby
Urrby

Reputation: 41

Repeating jQuery code and adepting

This is my code:

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;
        }
    });
});

This moves the cards i have in the middle of the page to the side with hover over the main card and returns them on click. But the problem is i can only do this one time (only one time hover and click....after that it does nothing). How can i make the code so i will be able to repeat this actions? And how can i adept jQuery on all screen sizes, so the cards will be always on the corners of the screen no matter its size? And the last thing, cards that go to the top animate little diferent for no reason. They don't go from their starting position like cards on bottom but move slightly top before animating diagonally. How can i fix that? If needed here is the full code (with css and html): http://jsfiddle.net/kkdpw/

Upvotes: 0

Views: 65

Answers (1)

bipen
bipen

Reputation: 36531

you need to change flag and banana back to true/false after the event.. 

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

Upvotes: 1

Related Questions