Question

我尝试创建jQuery幻灯片效果，以便在按下按钮时，第一个段落标记移出，第二个段落标记移动到视口中。我正在使用jQuery UI进行幻灯片效果，我似乎无法隐藏第二段，然后将其滑入，然后隐藏第一段。

HTML：

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="test.js"></script>
    </head>

<body>
    <button onclick="hideme()">Hide it</button>
    <p id="1">Hide this text</p>
    <p id="2"> Show this text</p>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
</body>
</html>

使用Javascript：

$(window).load(function() {
    $('#2').fadeOut(1);
});

function hideme(){
    $('#1').hide( "slide", 2000 );
    $('#2').show( "slide", 2000);
}

Answer 1

$(window).load(function() {
    $('#text-2').fadeOut(2000);
    $('#hide-it-button').click(function() {

        $('#text-1').hide( "slide", 2000, function() {
            $('#text-2').show( "slide", 2000);
        });
    });
});

Answer 2

window.load可能不是将jquery动作侦听器绑定到按钮的最佳时机。我重新写了这个： http://jsfiddle.net/gyJPc/

$(document).ready(function() {
    $('#2').fadeOut(5);

    $('button').click(function(){
        hideme();
    });

    var hideme = function(){
        $('#1').hide();
        $('#2').show();
    };
});

Answer 3

使用此：

$(document).ready(function(){
    $('#2').fadeOut(1);

    $('button').on('click', function () {
        $('#1').hide("slide", 2000);
        $('#2').show("slide", 2000);
    });
});

这使用jQuery的.on()函数绑定click事件，并在使用$(document).ready(function(){...});准备好操作DOM时执行。

这里有效：http://jsfiddle.net/VEY2B/

jQuery UI不会隐藏元素

3 个答案: