1

我正在尝试创建一个 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);
}
4

3 回答 3

0

window.load 可能不是将 jquery 操作侦听器绑定到按钮的最佳时间。我把它改写成这样：http: //jsfiddle.net/gyJPc/

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

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

    var hideme = function(){
        $('#1').hide();
        $('#2').show();
    };
});
于 2013-10-16T19:32:37.147 回答
0

用这个：

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

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

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

它在这里工作：http: //jsfiddle.net/VEY2B/

于 2013-10-16T19:36:50.807 回答
0 
$(window).load(function() {
    $('#text-2').fadeOut(2000);
    $('#hide-it-button').click(function() {

        $('#text-1').hide( "slide", 2000, function() {
            $('#text-2').show( "slide", 2000);
        });
    });
});
于 2013-10-16T19:21:41.427 回答