JQuery изменения размера проблемы DIV с помощью операторов

Question

я надеюсь, что кто-нибудь может мне помочь с этим,

У меня есть 3 квадрата и я хочу использовать анимацию на площадях, но с оператором, такие как «>» или «>»

, но я понятия не имею, как я могу осуществить это,

на клик функция работает, но если и нажмите на вторую DIV, когда первый ДИВ делает одушевленным, оказывается, что обе дивы будут расширены, цель заключается в том, что когда первый div расширяется, другой нет, и т. д. попробуйте и посмотрите

$(function() { 
     $("#square1").on("click", function() { 
     if ($("#square2").css('width') == '500px') { 
      $("#square2").animate({ 
       width: "50" 
      }, 1000); 
      $("#square1").animate({ 
       width: "500" 
      }, 1000); 
     } else if ($("#square1").css('width') == '500px') { 
      $("#square1").animate({ 
       width: "50" 
      }, 1000); 
     } else { 
      $("#square1").animate({ 
       width: "500" 
      }, 1000); 
       } 
      }); 
     }); 
$(function() { 
    $("#square2").on("click", function() { 
     if ($("#square1").css('width') == '500px') { 
      $("#square1").animate({ 
       width: "50" 
      }, 1000); 
      $("#square2").animate({ 
       width: "500" 
      }, 1000); 
     } else if ($("#square2").css('width') == '500px') { 
      $("#square2").animate({ 
       width: "50" 
      }, 1000); 
     } else { 
      $("#square2").animate({ 
       width: "500" 
      }, 1000); 
     } 
    }); 
}); 
$(function() { 
    $("#vierkant").on("click", function() { 
     if ($("#square1").css('width') == '500px') { 
      $("#square1").animate({ 
       width: "50" 
      }, 1000); 
      $("#square2").animate({ 
       width: "50" 
      }, 1000); 
     } 
    }); 
}); 

http://jsfiddle.net/c34Ha/

заранее спасибо

Answer 1

Вы можете проверить, если какой-либо из DIV является анимируемого прежде, чем анимировать другую, добавив

if (!$("#square1").is(':animated')) { 
    // do stuff 
} 

http://jsfiddle.net/c34Ha/1/