0

jQueryスクリプトをワンクリックで非表示にして表示したいのですが、DIVでリンクを非表示にするとSHOWという単語が表示され、リンクを表示するとHIDEという単語が表示されます。

私を探してください。

よろしくお願いします。

$(document).ready(function() {
    $('#hide').click(function(e) {
        $('.DIV').delay(500).animate({
            marginLeft: '-100%',
        });
        return false;
    });

    $('#show').click(function(e) {
        $('.DIV') .delay(500) .animate({
            marginLeft: '0%',
        });
        return false;
    });
});
4

1 に答える 1

1

それを行う 1 つの方法は、 with toggleand animateleftです。スライドするにはに設定positionする必要があります。relative

HTML 

<div id="toggleDiv">hide</div>
<div class="test">Some text</div>​

CSS 

.test {
 position: relative;
}

jQuery

$('#toggleDiv').toggle(function() {
    $('.test').delay(500).animate({
        'opacity': 0,
        'left': '-100%'
    });
    $(this).delay(1000).queue(function(n) {
        $(this).html('show');
        n();
    });
}, function() {
    $('.test').delay(500).animate({
        'opacity': 1,
        'left': '0%'
    });
    $(this).delay(1000).queue(function(n) {
        $(this).html('hide');
        n();
    });
});​

JSFiddle
http://jsfiddle.net/dW8Rv/1

于 2012-07-10T09:05:10.803 に答える