Question

我想向上滑动标题延迟并将其向下滑动。我有函数绑定到表单提交但它只是第一次滑动和幻灯片发生。代码如下。

$(document).ready(function() {
  console.log("ready!");


$('form').on('submit', function() {

        setInterval(function() {
            $('header').slideUp(500, function() {
                 $('header').delay(10000).slideDown(500);
                });
            });

        var url = $('input[name="Value"]').val();
        console.log(url)                      
        $.ajax({                                  
                type:'POST',
                url:'/first_page',
                data: {'val': url },
                cache:false,
                success: function(results){
                        console.log(results);

                        $("#heading").html("Word Cloud")
                        $("#key1").html("The primary topic of this page is" + " " +results.pt) 
                        $("#key2").html(" with the relevancy score of" + " " + results.ptr)
                        $("#key3").html("The secondary topic of this page is" + " " + results.st)
                        $("#key4").html(" with the relevancy score of" + " " + results.str)
            },error:function(error){
                   console.log(error)
                 }
});
});

任何人都可以建议我为什么在刷新页面时只发生一次？谢谢。

Answer 1

由于这是异步，您希望将slideDown()方法放在回调中：

＆＃13;

$('form').on('submit', function() {
    $('header').slideUp(500);
 
  var url = $('input[name="Value"]').val();
  console.log(url)
  $.ajax({
    type: 'POST',
    url: '/first_page',
    data: {
      'val': url
    },
    cache: false,
    success: function(results) {
      console.log(results);

      $("#heading").html("Word Cloud")
      $("#key1").html("The primary topic of this page is" + " " + results.pt);
      $("#key2").html(" with the relevancy score of" + " " + results.ptr);
      $("#key3").html("The secondary topic of this page is" + " " + results.st);
      $("#key4").html(" with the relevancy score of" + " " + results.str);
      $('header').delay(10000).slideDown(500);
    },
    error: function(error) {
      console.log(error)
    }
  });
  
  return false;
});

＆＃13;

Answer 2

这是因为它是异步方法。而且您需要将其与事件绑定。只有这样你才会看到它发生。

每个AJAX调用都有JQuery SlideUp，Delay和SlideDown

2 个答案: