Question

我正在学习jquery / ajax，我遇到了这个问题...我想让内容慢慢滑动1秒，同时删除内容......我知道我可以用{{1}这样的命令擦除容器内容但我想慢慢擦掉它......同时，我希望服务器能够处理某些事情......

以下是我所拥有的：的index.html：

$(".page1" ).empty();

mainScript.js：

<!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：

var SiteName="/test";

function ButtonClick(id){
    $(".page1" ).empty();
    if(id==0){
        $.ajax({
                type:"GET",
                url:SiteName+"/A1.php",
                dataType:"json",
                success:success,
                error:error
            });
    }
    else{
        $.ajax({
                type:"GET",
                url:SiteName+"/A2.php",
                dataType:"json",
                success:success,
                error:error
            });
    }
}

function error(){
    alert("Something went wrong.");
}

function success(arr){
    var text=arr['text'];
    $(".page1").append(text);
}

A2.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>
"));

?>

styles.css的：

<?php

echo json_encode(array("text"=>"
    <div class=\"page1\">
        <p>123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....
        123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....</p>
        <p>random image</p>
        <img src=\"3.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=\"4.jpg\"/>
        <p>123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....</p>
        <p>123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....</p>
        <p>123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....</p>
        <p>123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....</p>
        <p>123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....</p>
        <img src=\"5.jpg\"/>
        <p>123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....</p>
        <p>123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....</p>
    </div>
"));

?>

所以这就是我想象我想要的......你按下Button1或Button2它会调用ButtonClick（）函数...它会向服务器发送ajax请求然后慢慢开始移动2个按钮，擦除div page1的内容。当div的内容被完全擦除并且客户端从服务器获取数据时，它应该开始慢慢地写入新内容，同时向下移动按钮。我希望它易于遵循...... 如何让它像那样滑动？

Answer 1

我无法理解您的代码但是为了做到这一点，您可以使用fadeOut()和fadeIn() jquery函数或直接使用javascript更改元素的css不透明度或jquery animate（）函数。

Answer 2

使用slideX函数上的回调追加并清空div。

示例：

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

Answer 3

感谢大家，我想出了一个解决方案...... 我又做了两个全局变量，并做了这样的回调：

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;
    }
}

Answer 4

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

＆＃13;

$('selector').slideUp(); 
$('selector').slideDown();

＆＃13;

如果你想要淡入/淡出效果：

＆＃13;

$('selector').fadeIn();
$('selector').fadeOut();

＆＃13;

如何在删除/添加内容时滑动内容？

4 个答案: