JQuery несколько селекторов, исчезать и исчезать
У меня есть функция щелчка
$("#productlink1").click(function() {
$('#productstitle').fadeOut(1000, function(){
$('#productstitle').html('<h4>Corporate Promotions </h4>').fadeIn(1000);
});
$('#productscontent,#flexibility').fadeOut(1000, function(){
$('#corporate').fadeIn(1000);
});
remove();
$(this).addClass('active');
return false;
});
Поэтому, когда я нажимаю на ссылку, заголовок исчезает, затем новый заголовок, все работает хорошо
Однако второй фрагмент кода, постепенное появление, появляется перед исчезновением, эта строка
$('#productscontent,#flexibility').fadeOut(1000, function(){
$('#corporate').fadeIn(1000);
});
Однако, если у меня только один выбранный элемент, он работает нормально
$('#productscontent').fadeOut(1000, function(){
$('#corporate').fadeIn(1000);
});
Есть ли проблема с несколькими селекторами?
Спасибо
4 ответа
$('#link').click(function() {
$("#div1, #div2").each(function(){
$(this).fadeOut(1000, function(){
$('#div3').fadeIn(1000);
});
});
})
Из jQuery .fadeOut()
документация:
Если несколько элементов анимированы, важно отметить, что обратный вызов выполняется один раз для соответствующего элемента, а не один раз для анимации в целом.
Спасибо за все предложения, я не могу заставить работать вышеперечисленное,
по сути, поскольку элемент скрыт, его исчезновение происходит немедленно, "хакерский" способ обойти это для меня - просто добавить задержку
$("#productlink1").click(function() {
$('#productstitle').fadeOut(1000, function(){
$('#productstitle').html('<h4>Corporate Promotions </h4>').fadeIn(1000);
});
$('#productscontent,#flexibility').fadeOut(1000, function(){
$('#corporate').delay(1000).fadeIn(1000);
});
remove();
$(this).addClass('active');
return false;
});
Это остановило появление, пока другие элементы не исчезли, это не то, как я хотел это исправить, но пока это работает.
С другими ответами происходило то же самое
Элементы, которые уже скрыты, исчезнут
Надеюсь, вы спрятали элемент corporate
вначале
$(document).ready(function(){
$("#corporate").hide(); // hiding corporate on document load
$("#productlink1").click(function() {
$('#productstitle').fadeOut(1000, function(){
$('#productstitle').html('<h4>Corporate Promotions </h4>').fadeIn(1000);
});
$('#productscontent,#flexibility').fadeOut(1000, function(){
$('#corporate').fadeIn(1000);
});
remove();
$(this).addClass('active');
return false;
});
});