jquery - Jquery 1单击隐藏并从左到右显示

Question

我希望我的 jQuery 脚本一键隐藏并显示，当它隐藏链接时显示单词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;
    });
});

Answer 1

一种方法是使用toggle和动画left。您需要设置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