1

ボタンを押すと、最初の段落タグが移動し、2 番目の段落タグがビューポートに移動するように、jQuery スライド効果を作成しようとしています。スライド効果に jQuery UI を使用していますが、2 番目の段落を非表示にしてからスライドさせて、最初の段落を非表示にすることはできません。

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(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 に答える
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 に答える