Question

嗨朋友我想通过点击一个div来制作一个简单的slideUP和slideDown，但事情是什么时候在div上舔它滑下来但是当我再次点击div使它滑动它再次滑下来..请求帮助我们你可以 check fiddle here ，或者你可以查看下面的代码

SCRIPT

$(document).ready(function(){

    var h = $(".slide").height();

    var h = h-15;
    alert(h);
    $(".slide").css('top','-'+h+'px')

    //var r=0, dir=true;
    $(".slide").click(function() {
        //dir = !dir;
       // r = dir? -280 : 0;

        if($(".slide").css('top','-'+h+'px'))
        {
        $(this).stop().animate({top: h+'px'}, 800);
        } else

        {
            $(this).stop().animate({top: '-'+h+'px'}, 800);
        }
    });
});

CSS

.slide {
    position:absolute;
    width:100%;
    top:-102px;
    left:0px;
    background-color:#8cc;
    cursor:pointer;
}

HTML

<div class="slide">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
</div>

<div style="width:350px; background:#ccc;">
    Slide demo<br/>
    Slide demo<br/>
    Slide demo<br/>
    Slide demo<br/>
    Slide demo<br/>
    Slide demo<br/>
    Slide demo<br/>
    Slide demo<br/>
    Slide demo<br/>
    Slide demo<br/>
</div>

Answer 1

$(document).ready(function(){

    var h = $(".slide").height();

    var h = h-15;

    $(".slide").css('top','-'+h+'px')

    //var r=0, dir=true;
    $(".slide").click(function() {
        //dir = !dir;
       // r = dir? -280 : 0;

        if($(".slide").css('top')==-h+'px')
        {
        $(this).stop().animate({top: h+'px'}, 800);
        } else

        {
            $(this).stop().animate({top: '-'+h+'px'}, 800);
        }
    });
});

<强> http://jsfiddle.net/DcWS2/602/

Answer 2

您可以为元素提供类似这样的数据属性

<强> HTML

<div class="slide" data-slide="true">

<强>的jQuery

  $(".slide").click(function () {
        if ($(this).data('slide')) {//checked if true
            $(this).stop().animate({
                top: h + 'px'
            }, 800);
            $(this).data('slide', false);
        } else {
            $(this).data('slide', true);
            $(this).stop().animate({
                top: '-' + h + 'px'
            }, 800);
        }
    });

DEMO

Answer 3

您需要将if($(".slide").css('top','-'+h+'px'))替换为：if($(".slide").css('top') == '-'+h+'px')

Answer 4

更改if子句的条件

HTML CODE：

<div class="slide">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.</div>
<div style="width:350px; background:#ccc;">Slide demo
<br/>Slide demo
<br/>Slide demo
<br/>Slide demo
<br/>Slide demo
<br/>Slide demo
<br/>Slide demo
<br/>Slide demo
<br/>Slide demo
<br/>Slide demo
<br/>

JQUERY CODE：

$(document).ready(function () {
var h = $(".slide").height();
h = h - 15;
$(".slide").css('top', '-' + h + 'px');
$(".slide").click(function () {
    var cond = '-' + h + 'px';
    if ($(".slide").css('top').toLowerCase() == cond) {
        $(this).stop().animate({
            top: h + 'px'
        }, 800);
    } else {
        $(this).stop().animate({
            top: '-' + h + 'px'
        }, 800);
    }
 });
});

现场演示：

http://jsfiddle.net/DcWS2/615/

在你的jsfiddle上也很少遗漏一些小的语法错误，我也纠正了它们。

快乐编码：）

使用jQuery的slideUp（）和slideDown（）

4 个答案: