Анимация slideUp и slideDown не работает после первого использования - PullRequest
Новая
       52

Анимация slideUp и slideDown не работает после первого использования

0 голосов
/ 09 октября 2018

Я использовал jQuery для создания чего-то вроде выпадающего списка, но он работает только для первых двух кликов, а затем - нет.Как я могу сделать выпадающий?Это можно сделать с помощью цикла?(Я еще не изучил цикл, поэтому любое решение будет работать.)

Для каждого слайда и слайда я хотел сделать разное время .... 

jQuery(document).ready(function() {
  jQuery(".click-on").click(function() {
    jQuery(".box").slideUp(2000, function() {
      jQuery(".click-on").click(function() {
        jQuery(".box").slideDown(500);
      });
      return false;
    });
    return false;
  });
});
.box {
  width: 300px;
  height: 300px;
  background-color: skyblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="fan">THIS IS A FAN</p>
<p id="gun">THIS IS A GUN</p>

<p class="click-on">Click Here</p>
<div class="box"></div>

Ответы [ 3 ]

0 голосов
/ 09 октября 2018

Ответ от @hetious - это то, что я бы дал, но, только увидев комментарий о том, что слайд-ап и сползание-вниз должны иметь разное время, вам придется сделать это вместо этого.По сути, проверяйте, когда вы нажимаете, является ли поле видимым или нет, и соответственно соответственно slideUp или dlideDown: 

jQuery(document).ready(function() {
  jQuery(".click-on").click(function() {
    var box = jQuery(".box");
    if (box.is(":visible")) {
      box.slideUp(2000);
    }
    else {
      box.slideDown(500);
    }
  });
);

(Обратите внимание, что я извлек переменную для jQuery(".box"), просто чтобы сохранить некоторые данные. Ивы также можете использовать $ в качестве псевдонима для jQuery, чтобы сохранить еще больше (единственная причина, по которой это не сработает, это если вы используете другую библиотеку, которая определяет глобальную переменную $, что делают некоторые.)

0 голосов
/ 09 октября 2018

Это потому, что вы неправильно поняли значение функции .click().

.click() устанавливает функцию-обработчик каждый раз, когда событие щелчка вызывается из выбранной DOM.

Поскольку вы вызвали еще один .click() в функции обратного вызова .slideUp(), вы фактически заменяете функцию-обработчик.В вашей текущей логике очевидным решением является бесконечный обратный вызов после каждого клика, например: 

jQuery(".click-on").click(function(){
    jQuery(".box").slideUp(2000, function(){
        jQuery(".click-on").click(function(){
            jQuery(".box").slideDown(500,function(){
                jQuery(".click-on").click(function(){ 
                    jQuery(".box").slideUp(2000, function(){//Repeating callbacks... ...
            });
        });
    });
});

, и, если серьезно, это очень плохо.Такую реализацию делать не следует.

Вместо этого лучше проводить условную проверку для каждого клика, поэтому логика сама определит, следует ли вызвать .slideUp() или .slideDown().Это должно быть похоже на 

$(".click-on").click(function(){//you can also use $ instead of jQuery
    //do some conditional check here
    if(isSlidedUp)$(".box").slideDown(1000);
    else $(".box").slideUp(1000)
});

или даже лучше, если вы используете .slideToogle(). 

$(".click-on").click(function(){
    $(".box").slideToggle(1000)
}
0 голосов
/ 09 октября 2018

Вы хотите добиться чего-то подобного? 

$(document).ready(function(){
  $(".click-on").click(function(){
    $('.box').slideToggle();
  });
});

https://jsfiddle.net/jsrc9mbd/1/

...