Question

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

Jquery 1单击“隐藏”并从左向右显示

1 个答案: