Question

这是我关于堆栈溢出的第一篇文章。

我有一个显示/隐藏的淡入淡出和幻灯片，在页面加载时打开。它运作得很好。

我只想在打开时从“x”更改文本，在关闭时更改“ - ”。

这是我正在使用的脚本，我从stackoverflow上的另一个问题得到了。

function toggleSlider() {
    if ($(".slidingDiv").is(":visible")) {
        $("#contentThatFades").animate(
            {
                opacity: "0"
            },
            600,
            function(){
                $(".slidingDiv").slideUp();
            }
        );
    }
    else {
        $(".slidingDiv").slideDown(600, function(){
            $("#contentThatFades").animate(
                {
                    opacity: "1"
                },
                600
            );
        });
    }   
}

   <!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Untitled</title>


    <!-- The 1140px Grid - http://cssgrid.net/ -->
    <link rel="stylesheet" href="css/1140.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" />


    <script type="text/javascript" src="js/css3-mediaqueries.js"></script>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

function toggleSlider() {
        if ($(".slidingDiv").is(":visible")) {
            $("#contentThatFades").fadeTo(600, 0, function(){
                    $(".slidingDiv").slideUp();
                    $("#closebutton").text("-");
                }
            );
        } else {
            $(".slidingDiv").slideDown(600, function(){
                $("#closebutton").text("x");
                $("#contentThatFades").fadeTo(600, 1);
            });
        }   
    }

    $('#closebutton').on('click', function(e){
        e.preventDefault();
        toggleSlider();
        });</script>


</head>



<body>


<div class="container top">
    <div class="row">
        <div class="threecol">
        <a href="#" id="closebutton">x</a>
        </div>
        <div class="twocol">
        Text
        </div>
        <div class="twocol">
        Text
        </div>
        <div class="threecol">
        </div>
        <div class="twocol last">
        Text
        </div>
    </div>
</div>


<div class="container slidingDiv">
    <div id="contentThatFades" style="opacity:1;filter:alpha(opacity=1);">
        <div class="row">
            <div class="threecol">
            <h1>Text</h1>
            </div>
            <div class="fivecol">
            Text
            </div>
            <div class="fourcol last">
            </div>
        </div>
    </div>
</div>

</body>
</html>

Answer 1

这应该可以解决问题：

$(document).ready(function(){

    function toggleSlider() {
        if ($(".slidingDiv").is(":visible")) {
            $("#contentThatFades").fadeTo(600, 0, function(){
                    $(".slidingDiv").slideUp();
                    $("#closebutton").text("-");
                }
            );
        } else {
            $(".slidingDiv").slideDown(600, function(){
                $("#closebutton").text("x");
                $("#contentThatFades").fadeTo(600, 1);
            });
        }   
    }

    $('#closebutton').on('click', function(e){
        e.preventDefault();
        toggleSlider();
    });
});

使用显示/隐藏淡入淡出功能切换文本滑动

1 个答案: