Question

哟所有人！

我是jQuery的新手，我想知道如何使用fadeIn和FadeOut显示/隐藏div，同时动画从下到上，从上到下。

我试过这个：http://jsfiddle.net/jalxob/kNL5m/2/

但它也显示{＆＃34;错误＆＃34;：＆＃34;请使用POST请求＆＃34;}

有人可以帮助我吗？

$('.hello').click(function() {
$(".content_b").fadeIn();
$(".content_b_content").animate({marginTop:"-=100px"},300);

Answer 1

使用hash作为这两个锚标记的href属性，但请注意，使用#作为href属性会导致页面为{{1} }回到bump。

top

DEMO

或者另外一个好的工作将是这样的，通过提供像这样的<a href="#" class="hello">Show It</a>的href属性来取消特定锚标记的操作，

javascript:void(0)

DEMO I

Answer 2

您只需要e.preventDefault()或将#添加到<a href='#'></a>代码

$('.hello').click(function(e) {
         e.preventDefault();
        $(".content_b").fadeIn();
        $(".content_b_content").animate({marginTop:"-=100px"},300);
});

$('.goodbye').click(function(e) {
        e.preventDefault();
        $(".content_b").fadeOut();
        $(".content_b_content").fadeOut();
});

Updated Fiddle

Answer 3

写：

<span class="hello">Show It</span> //No need of link as you are animating divs on click
<span class="goodbye">Show It</span>

而不是

<a href="" class="hello">Show It</a>
<a href="" class="goodbye">Show It</a>

CSS：

.hello,.goodbye{cursor:pointer;}

Updated fiddle here.

Answer 4

在href属性中使用＃。 Updated fiddle这是因为您需要null值才能将用户带到他所在的同一页面。

另外，我将click()更改为on("click", function())

jQuery从下到上显示/隐藏div

4 个答案:

DEMO

DEMO I