Question

我有一些数据存储在数据库中，当用户输入他们的邮政编码时，他们附近的商店列表会显示在列表中。我用这样的PHP调用了这个：

<div class="stores">
   <h3><?= $store['name'] ?></h3>
   <?= $store['address'] ?><br>
   <?= $store['city'] ?><br>
   <?= $store['county'] ?><br>
   <?= $store['postcode'] ?><br>
</div>

这会在列表中显示最近的5个商店。

我遇到的问题是当点击表单上的提交按钮时发生jQuery fadeIn wise-甚至试过onlcick和onload alert（'test'）;这有效但不能解雇fadeIn。我已经尝试通过css设置框的样式，所以当用户看到结果时，每个商店一个接一个地消失，并且使用此链接成功了：http://graphicfusiondesign.com/blog/design/creating-fancy-css3-fade-in-animations-on-page-load/

我试图用jQuery做同样的事情并且不确定为什么这不会触发我在jQuery中使用与css fadeIn相同的类。

的jQuery

$( document ).ready(function() {
       $("#submit").click(function(){
       $(".stores:nth-of-type(3)").fadeIn(1000);
       $(".stores:nth-of-type(4)").fadeIn(2000);
       $(".stores:nth-of-type(5)").fadeIn(3000);
    });
  });

我的表格：

<input type="text" name="postcode" value="<?= $_GET['postcode'] ?>">                        
<input type="submit" value="search" id="submit">

以前有人有任何建议或遇到过这个问题吗？

Answer 1

要查看效果：

$( document ).ready(function(e) {
       e.preventDefault();
       $("#submit").click(function(){
       $(".stores:nth-of-type(3)").fadeIn(1000);
       $(".stores:nth-of-type(4)").fadeIn(2000);
       $(".stores:nth-of-type(5)").fadeIn(3000);
    });
  });

但是，您的表单未提交。你需要添加一些ajax逻辑。

Answer 2

如果您愿意在提交表单之前淡入元素，请尝试以下操作：

$( document ).ready(function() {

       $("#submit").click(function(e){


e.preventDefault();
       $(".stores:nth-of-type(3)").fadeIn(1000);
       $(".stores:nth-of-type(4)").fadeIn(2000);
       $(".stores:nth-of-type(5)").fadeIn(3000,function(){
document.formname.submit();
});
    });
  });

Answer 3

$(function() {

    var form = $('#submit').closest('form'); // replace this with ID of the form

    form.on('submit', function(e) {
        e.preventDefault();
        var self = this;
        $(".stores:nth-of-type(3)").fadeIn(1000);
        $(".stores:nth-of-type(4)").fadeIn(2000);
        $(".stores:nth-of-type(5)").fadeIn(3000, function() {
            self.submit();
        });
    });

});

提交/ onLoad上的JQuery不会触发fadeIn效果

3 个答案: