Блог

Главная - Вопросы по программированию - jQuery hide () не удается распознать параметр ‘duration’

jQuery hide () не удается распознать параметр ‘duration’

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Похоже, не могу найти ответ на этот вопрос.

Я пытаюсь анимировать hide() при скрытии <li> элемента. У меня есть <span> внутренняя часть <li> , которая действует как кнопка «удалить».

Это та часть, которую я, похоже, не могу заставить работать.

 $('#list1').on('click', 'li span', function(event) {  
  $(this).parent().hide(1000); 
});

Элемент списка, по сути, скрывается. Однако длительность НЕ вступает в силу. Элемент исчезает без какой-либо «анимации».

Вот он в действии: https://jsfiddle.net/scampione/effnuct0/14 /

Был бы признателен за любую помощь.

Комментарии:

1. Вы пытались включить jQuery -> jsfiddle.net/adeneo/effnuct0/15 , jQuery Slim не имеет анимации

2. Не то, что вы просите, но интерактивные элементы span не очень хороши с точки зрения доступности: пользователи, которым ограничен доступ к клавиатуре, не могут щелкнуть их (такие пользователи могут «щелкнуть» элементы привязки).).

3. Вот как это должно работать, поскольку @adeneo заявил, что в jQuery slim нет анимации. Вместо этого включите обычный jQuery, и он будет иметь анимацию.

Ответ №1:

Кажется, здесь все работает нормально, как только я включил jQuery.

Как отмечалось в комментариях, jQuery Slim не содержит используемой вами анимации. Вам необходимо включить полную библиотеку jQuery.

 var buildArray = function(max) {
  var rtnArray = [];
  var i = 0;
  for (i = 1; i <= max; i  ) {
    rtnArray.push(i);
  }
  return rtnArray;
}

var feedBack = $('.display-feedback');

var delButton = '<span class="delete-item">X</span>';

var appendToList = function(theStr) {
  var target = $('#list1')
  target.append('<li>'   theStr   delButton   '</li>')
}


$('.clear-feedback').on('click', function() {
  feedBack.empty();
});

$('#list1').on('click', 'li span', function(event) {
  $(this).parent().hide(1000);
});

$('#list1').on('click', 'li', function(event) {
  feedBack.text(event.type   " - "   event.target.nodeName   " - "   event.currentTarget);
});

var myArray = buildArray(10);
appendToList(myArray)
appendToList(myArray.map(num => num * 7));
appendToList(myArray.filter(num => num > 5));
appendToList(myArray.map(num => num * 7).filter(num => num > 35));  
 .container {
  height: auto;
  border: solid 1px cornflowerblue;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 30px;
  font-family: Arial;
  color: #717171;
}
.output-list {
  list-style: none;
  background-color: #ffffff;
  padding: 5px;
  border: solid 2px #77ddbb;
  border-radius: 5px;
}
.output-list li {
  display: flex;
  justify-content: space-between;
  background-color: #44bbee;
  border-radius: 5px;
  color: white;
  padding: 5px;
  margin: 5px;
}
.output-list > span {
  display: inline-block;
  padding: 5px;
  margin: 5px;
  border: solid 1px #a0a0a0;
  border-radius: 5px;
}
.delete-item {
  color: #e0e0e0;
  padding: 3px;
  border-radius: 5px;
}
.delete-item:hover {
  color: #ffffff;
  cursor: pointer;
}
.feedback {
  display: flex;
  justify-content: space-between;
  align-content: flex-start;
}
.clear-feedback {
  width: 39px;
  height: 20px;
  padding: 3px;
  border-radius: 5px;
  text-align: center;
  background-color: #aabbcc;
  color: white;
}
.clear-feedback:hover {
  background-color: #778899;
}
.clear-feedback:active {
  background-color: #556677;
}  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <ul class="output-list" id='list1'>
    <span>a amp;ltspanamp;gt in list 1</span>
    <li>this amp;ltLIamp;gt is from HTML
      <span class='delete-item'>X</span>
    </li>
  </ul>


  <div class="feedback">
    <div class='display-feedback'></div>
    <span class='clear-feedback'>Clear</span>
  </div>
</div>

Комментарии:

1. Это действительно очень длинный пример. Я думаю, что задавшему этот вопрос было бы понятнее, если бы вы предоставили наименьший разумный код для воспроизведения этого…

2. Это просто его собственный код в фрагменте SO. Я мог бы сократить его, но он показывает, что точно такой же код работает нормально, когда я включил jquery.

3. Это было так!! Спасибо Jecoms и adeneo. Я включал jQuery slim. Не понял, что он не включает анимацию. Еще раз спасибо!

Ответ №2:

Hide делает, за исключением параметра скорости, попробуйте избавиться, если li внутри аргументов функции и просто скажите span.

Комментарии:

1. Почему это поможет?

2. Ну, во-первых, это сделало бы синтаксис правильным, потому что нет причин включать туда li. Я бы просто использовал fadeOut вместо этого и посмотрел, работает ли это.

3. @DanielZuzevich Ты знаешь, что у них есть скрипка, которую вы можете изменить? Также это не проблема.

4. Это не сделало бы синтаксис «правильным», потому что на данный момент он не является «неправильным».

5. Зачем вам помещать li внутри аргумента, когда после этого вы явно вызываете родительский метод.