Одновременная анимация jQuery - PullRequest
Новая
       13

Одновременная анимация jQuery

4 голосов
/ 24 июля 2011

Я пытаюсь заставить одновременно работать fadeIn (переключатель непрозрачности) и затухание границ (используя jquery-animate-colors ), но у меня возникли некоторые проблемы. Может ли кто-нибудь помочь просмотреть следующий код? 

$.fn.extend({
  key_fadeIn: function() {
    return $(this).animate({
      opacity: "1"
    }, 600);
  },
  key_fadeOut: function() {
    return $(this).animate({
      opacity: "0.4"
    }, 600);
  }
});

fadeUnselected = function(row) {
  $("#bar > div").filter(function() {
    return $(this).id !== row;
  }).key_fadeOut();
  return $(row).key_fadeIn();
};

highlightRow = function(row, count) {
  return $(row).animate({
    "border-color": "#3737A2"
  }).animate({
    "border-color": "#FFFFFF"
  }).animate({
    "border-color": "#3737A2"
  }).animate({
    "border-color": "#FFFFFF"
  });
};


fadeUnselected("#foo");
highlightRow("#foo"); // doesn't fire until fadeUnselected is complete

Был бы очень признателен. Спасибо!

Ответы [ 2 ]

9 голосов
/ 24 июля 2011

По умолчанию JQuery помещает анимации в очередь эффектов, чтобы они появлялись одна за другой. Если вы хотите, чтобы анимация происходила немедленно, установите флаг queue:false на вашей карте параметров анимации.

Например, в вашем случае, 

$(this).animate({
      opacity: "1"
    }, 600);

станет 

$(this).animate(
{
    opacity: "1"
}, 
{
    duration:600,
    queue:false
});

Вы, вероятно, захотите использовать карту параметров и установить очередь для анимации границ.

http://api.jquery.com/animate/

0 голосов
/ 24 июля 2011 
$.fn.extend({
  key_fadeIn: function() {
    return $(this).animate({
      opacity: "1"
    }, { duration:600, queue:false });
  },
  key_fadeOut: function() {
    return $(this).animate({
      opacity: "0.4"
    }, { duration:600, queue:false });
  }
});

fadeUnselected = function(row) {
  $("#bar > div").filter(function() {
    return $(this).id !== row;
  }).key_fadeOut();
  return $(row).key_fadeIn();
};

highlightRow = function(row, count) {
  return $(row).animate({
    "border-color": "#3737A2"
  }).animate({
    "border-color": "#FFFFFF"
  }).animate({
    "border-color": "#3737A2"
  }).animate({
    "border-color": "#FFFFFF"
  });
};
...