Question

我在点击DIV内部的链接时尝试淡出DIV。这是我的代码：

$(".hideinfo").click(function () {
  var parentLink = $(this).parent().parent();               
  $(parentLink).fadeTo("slow", 0);
});

我没有直接指定ID的原因是因为我想使用它来淡出具有不同ID的多个DIV。

上面的代码在我设置警报时返回了ID，但没有将DIV淡出或我尝试过的任何其他内容......任何帮助都会受到赞赏。 HTML是：

<div id="First-Block" class="item">                 
    <p>text here</p>
    <p><a href="#" class="hideinfo">Back</a></p>    
</div>

谢谢！

Answer 1

您应该使用fadeOut("slow")代替。

尝试将代码更改为：

$(".hideinfo").click(function () {
    var parentLink = $(this).parent().parent();
    $(parentLink).fadeOut("slow");
});

为了进一步改善这一点，您可以将代码缩短为：

$(".hideinfo").click(function() {
    $(this).closest(".item").fadeOut("slow");
});

也可以提一下，通过点击一个锚点，它将使用#跳转到页面顶部。我会看看.preventDefault()

您还可以在此处查看API - ＆gt; http://api.jquery.com/fadeOut/

Answer 2

jsBin demo

$(".hideinfo").click(function( e ){
    e.preventDefault();           // prevent default anchor link behavior
    $(this).closest('.item').fadeTo(400, 0);
});

另外尝试将上述内容包装到document ready：

中

$(function(){
   // code here.
});

Answer 3

使用fadeOut()代替，因为您的主要目标是影响整体可见度而非给定的不透明度。

找到父DIV的ID并淡出DIV

3 个答案:

jsBin demo