Нажмите кнопку, чтобы FADEOUT все, а затем FadeIn один Item

Question

я следующее:

<script> 
$(document).ready(function() { 
    $('#submit1').click(function() { 
     $('.items').fadeOut('slow', function() { 
      $('#item1').fadeIn('slow'); 
     }); 
    }); 
    $('#submit2').click(function() { 
     $('.items').fadeOut('slow', function() { 
      $('#item2').fadeIn('slow'); 
     }); 
    }); 
}); 
</script> 

<div class="items" id="item1"></div> 
<div class="items" id="item2"></div> 

<input id="submit1" value="Click Me1"/></br> 
<input id="submit2" value="Click Me2"/> 

То, что я пытаюсь добиться, когда я нажимаю кнопку все .items FADEOUT, а затем выбранные #itemx выцветает . (nb там может быть много записей)

В настоящее время оба действия происходят одновременно, заставляя второго «прыгать» после его загрузки. Я хочу, чтобы это было гладко.

Я видел различные варианты вокруг $(this) и next(), но не вижу, как применить их к моей проблеме.

Answer 1

Так как вам нужно для нескольких элементов, чтобы закончить выцветания, используйте .when() и .done():

$('#submit1').click(function() { 
    $.when($('.items').fadeOut('slow')).done(function() { 
     $('#item1').fadeIn('slow'); 
    }); 
}) 
$('#submit2').click(function() { 
    $.when($('.items').fadeOut('slow')).done(function() { 
     $('#item2').fadeIn('slow'); 
    }); 
}) 

jsFiddle example

Также Путем добавления классов и атрибутов данных можно сократить его до стройных пять линий - jsFiddle example

Answer 2

Хорошо, я понимаю, что вы сейчас говорите.

Try таргетинг только .items, которые видны затухать, как это ..

Javascript

$(document).ready(function() { 
$('#submit1').click(function() { 
    $('.items:visible').fadeOut('slow', function() { 
     $('#item1').fadeIn('slow'); 
    }); 
}); 
$('#submit2').click(function() { 
    $('.items:visible').fadeOut('slow', function() { 
     $('#item2').fadeIn('slow'); 
    }); 
}); 

});

Примечание добавление :visible к селектору для .items

http://jsfiddle.net/nm3o7d4L/1/

Answer 3

Если я понял, что проблема правильно, ответ дается в документации fadeOut:

Если несколько элементов анимированы, важно отметить, что обратный вызов выполняется один раз для каждого элемента, а не один раз для анимации в целом.

Поскольку в большинстве случаев один из элементов уже исчез, его анимация заканчивается немедленно, вызывая вызов .fadeIn(). Там еще некоторая информация о том, как идти о фиксации это так, что вы стреляете новую функцию только после того, как всех из FADEOUT анимации закончившие:

По JQuery 1.6, метод .promise() может быть использован в сочетании с методом deferred.done() для выполнения одного обратного вызова для анимации в целом, когда все соответствующие элементы завершили свою анимацию.

Там есть ссылка на пример того, как сделать это, но, по существу код сводится к тому, что-то вроде этого:

$(document).ready(function() { 
 
    $('#submit1').click(function() { 
 
     $('.items').fadeOut('slow').promise().done(function() { 
 
      $('#item1').fadeIn('slow'); 
 
     }); 
 
    }); 
 
    $('#submit2').click(function() { 
 
     $('.items').fadeOut('slow').promise().done(function() { 
 
      $('#item2').fadeIn('slow'); 
 
     }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="items" id="item1">This is content 1</div> 
 
<div class="items" id="item2">This is content 2</div> 
 

 
<input id="submit1" value="Click Me1"/></br> 
 
<input id="submit2" value="Click Me2"/>

Answer 4

Это также возможно с одним обработчиком щелчка. ..

Просто сравните ID ...

$(document).ready(function() { 
    $('.submit').click(function() { 
     $submit = jQuery(this); 
     var submit_id = parseInt($submit.attr('id').replace('submit', ''), 10); 

     var $items = $('.items'); 
     $items.each(function() { 
      $div = jQuery(this); 
      var div_id = parseInt($div.attr('id').replace('item', ''), 10); 

      $div.fadeOut('slow', function() { 
       if (div_id == submit_id) { 
        $div.fadeIn('slow'); 
       } 
      }); 
     }); 
    }); 
}); 

Вот DEMO

Answer 5

Вы можете использовать одушевленные, чтобы избежать этого «скачка».

$('.items').animate({ opacity: 0 }, function(){ 
    $('#item2').animate({opacity: 1}); 
}); 

Посмотрите на мой пример :) http://jsfiddle.net/cx6fp3pb/