Javascript 如何在删除/添加内容幻灯片时制作内容幻灯片？_Javascript_Php_Jquery_Css_Ajax

Javascript 如何在删除/添加内容幻灯片时制作内容幻灯片？

javascript php jquery css ajax

Javascript 如何在删除/添加内容幻灯片时制作内容幻灯片？,javascript,php,jquery,css,ajax,Javascript,Php,Jquery,Css,Ajax,我正在学习jquery/ajax，我遇到了这个问题。。。我想让内容慢慢向上滑动1秒钟，同时删除该内容。。。我知道我可以使用类似于$（“.page1”）.empty（）的命令擦除容器内容但我想慢慢擦除它。。。同时，我想让服务器处理一些事情以下是我所拥有的： index.html： <!DOCTYPE html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> &l

我正在学习jquery/ajax，我遇到了这个问题。。。我想让内容慢慢向上滑动1秒钟，同时删除该内容。。。我知道我可以使用类似于

$（“.page1”）.empty（）的命令擦除容器内容但我想慢慢擦除它。。。同时，我想让服务器处理一些事情
以下是我所拥有的：
index.html：
<!DOCTYPE html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script src="jquery.js"></script>
    <script src="mainScript.js"></script>
    <title>ZZZZ</title>
</head>

<body class="main">

<div class="pageMain1" id="page">

    <div class="page1">
        <p>Text...text.......Text...text.......vText...text.......Text...text.......Text...text.......
        Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......</p>
        <p>random image</p>
        <img src="1.jpg"/>
        <p>Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......
        Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......</p>
        <img src="2.jpg"/>
        <p>Text...text.......Text...text.......Text...text.......Text...text.......</p>
    </div>

    <div class="page2">
        <button onclick="ButtonClick(0)">Button1</button>
        <button onclick="ButtonClick(1)">Button2</button>
    </div>

</div>

</body>
</html>

A1.php：
<?php

echo json_encode(array("text"=>"
    <div class=\"page1\">
        <p>Text...text.......Text...text.......vText...text.......Text...text.......Text...text.......
        Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......</p>
        <p>random image</p>
        <img src=\"1.jpg\"/>
        <p>Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......
        Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......</p>
        <img src=\"2.jpg\"/>
        <p>Text...text.......Text...text.......Text...text.......Text...text.......</p>
    </div>
"));

?>

这就是我如何想象我想要的。。。按Button1或Button2，它将调用ButtonClick（）函数。。。它将向服务器发送ajax请求，然后慢慢向上移动2个按钮，删除div page1的内容。
当div的内容被完全擦除并且客户端从服务器获取数据时，它应该开始缓慢地写入新内容，同时向下移动按钮。
我希望这很容易理解。。。
如何使它像那样滑动？
我无法理解您的代码，但要做到这一点，您可以使用fadeOut（）
和fadeIn（）
jquery
函数，或直接使用javascript
或jquery
动画（）更改元素的css不透明度函数。
使用slideX函数上的回调来追加和清空div

例如：
$(".page1").slideUp(400, function()
{
    $(".page1").empty();
    $(".page1").append(text);
    $(".page1").slideDown();
});

感谢大家，我想出了一个解决方案。。。
我又创建了两个全局变量，并进行了如下回调：
var lock1=0;
var text="";
function ButtonClick(id){
...
   $(".page1").slideUp(function(){
        if(lock1==1){
            lock1=0;
            $(".page1").empty();
            $(".page1").append(text);
            $(".page1").slideDown();
        }
        else{
            lock1=2;
        }
    });
...
}

function success(arr){
    text=arr['text'];
    if(lock1==2){
        lock1=0;
        $(".page1").empty();
        $(".page1").append(text);
        $(".page1").slideDown();
    }
    else{
        lock1=1;
    }
}

如果你想要滑动效果。使用jQuery：

$（'selector'）.slideUp（）；
$（'selector'）.slideDown（）嗯，你不理解我。。。我不希望它褪色，我希望div page2中的内容在擦除div page1的内容时缓慢地向上或向下滑动。你知道的。。。像一个滑动下拉菜单，但我希望它与整个div包含图像。我知道你想要什么，但对于这件事，你应该写你自己的代码或使用一个现成的滑块，我没有时间为你写代码，但我可以帮你做什么。对于您想要的内容，您应该选择page1移动它并将其不透明度更改为.8，然后使用animate（）函数和animate（）回调函数选择另一个页面并将其不透明度从0更改为1。是否需要示例代码？animate（）只移动对象。。。我想要一个与slideUp（）和slideDown（）函数类似的效果。。。但是如果我做了如下的东西：$（“.page1”）.slideUp（）$（“.page1”）.empty（）$（“.page1”）。附加（文本）$（“.page1”）.slideDown（）；这完全是错误的做法。如果您不理解这个问题，请添加一条要求澄清的注释查看以下代码：$（“.page1”）.animate（{'top'：'-1000px'，'opacity'：'0'}，1000，function（）{$（.page2”）.animate（{'top'：'0'，'opacity'：'1'}，1000）；}）；在你的css中：.page1{top:0；opacity:1；}.page2{top:-1000px；opacity:0}为了使用这段代码，你应该一直呆到第2页完全加载，然后运行这段代码。我会尝试创建一个容器div，它具有溢出：隐藏
。然后，当你想慢慢擦除一些东西时，只需对内容执行操作，所以实际上，它只是慢慢地将div移出容器。但是由于容器的溢出是隐藏的，它看起来就像是在慢慢擦除。然后再次使用slideDown将第二页滑入，但我也在等待服务器的ajax回调。如何将其中的两个组合在一起？我想执行$（“.page1”）.empty（）$（“.page1”）。附加（文本）$（“.page1”）.slideDown（）；当两个条件同时为真时：1。我们收到了服务器的回电。2.slideUp（）已完成。在回调中使用回调？我不想运行slideUp（）然后运行ajax或ajax然后运行slideUp（），我希望它们同时运行，并且当两者都结束时，我想放入新内容。
.pageMain1{
    width:50%;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}

$(".page1").slideUp(400, function()
{
    $(".page1").empty();
    $(".page1").append(text);
    $(".page1").slideDown();
});

var lock1=0;
var text="";
function ButtonClick(id){
...
   $(".page1").slideUp(function(){
        if(lock1==1){
            lock1=0;
            $(".page1").empty();
            $(".page1").append(text);
            $(".page1").slideDown();
        }
        else{
            lock1=2;
        }
    });
...
}

function success(arr){
    text=arr['text'];
    if(lock1==2){
        lock1=0;
        $(".page1").empty();
        $(".page1").append(text);
        $(".page1").slideDown();
    }
    else{
        lock1=1;
    }
}