javascript - fade_in fade_out 调用另一个页面

Question

我正在尝试使用 Jquery 的 fade_in fade_out 从另一个表单页面显示表单:例如，当前页面显示一个表单:姓名、年龄、国家。我正在对“国家/地区”输入使用自动完成功能。因此，如果用户没有通过自动完成功能找到他的国家/地区，他应该在不更改页面的情况下添加它。所以我想调用另一个页面，其中包含一个添加国家/地区的表单，并具有 fade_in 效果。

我该如何做这个？谢谢

Answer 1

这是你的答案

代码

HTML

<div class="p1"><input type="text" placeholder="Name" /><br /><input type="text" placeholder="Address" /><br /><select id="country" ><option>Select a country</option><option value="india">India</option><option value="add">Add new country</option></select>
  <input  type="button" id="subc" value="Submit"/>
</div>

CSS

.p1 { padding:10px; text-align:center }
.p2 { position: absolute; top:0; left:0; height:100%; width:100%; text-align:center; background-color:#FFF; display:none }

JQUERY

$(document).ready(function(e) {
    $('#country').change(function(e) {
        if($(this).val() == 'add'){
            $('.p1').fadeOut()
            $('.p2').fadeIn()
        }
    });
    $('#addc').click(function(e) {
        $c = $('#ncountry').val()
        if($c != ''){
        $('#country').append('<option>'+$c+'</option>')
        alert('Country added to list')
        $('.p2').fadeOut()
            $('.p1').fadeIn()
        }
        else{
            alert('Enter a country name')
        }
    });

fiddle http://jsfiddle.net/krunalp1993/tkBDN/1/

希望对你有帮助:)