0

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

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

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

我遇到的问题是当单击表单上的提交按钮时，没有发生 jQuery fadeIn 明智的 - 甚至尝试了 onlcick 和 onload alert('test'); 这有效但不能触发淡入淡出。我已经尝试通过 css 设置框的样式，所以当用户看到结果时，每个商店都一个接一个地淡入淡出，并且使用此链接成功：http: //graphicfusiondesign.com/blog/design/creating-fancy-css3-fade-页面加载动画/

我正在尝试对 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">

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

4

3 回答 3

0

要查看效果：

$( 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 逻辑。

于 2013-06-05T10:41:32.943 回答
0

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

$( 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();
});
    });
  });
于 2013-06-05T10:50:26.340 回答
0 
$(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();
        });
    });

});
于 2013-06-05T10:52:23.817 回答