Tương đương với jQuery .hide() để đặt chế độ hiển thị: ẩn

Question

Trong jQuery, có các phương thức .hide() và .show() đặt cài đặt CSS display: none.

Có chức năng tương đương nào sẽ đặt cài đặt visibility: hidden không?

Tôi biết tôi có thể sử dụng .css() nhưng tôi thích một số chức năng như .hide() hoặc hơn. Cảm ơn.

Answer 1

Bạn có thể tạo các plugin của riêng mình.

jQuery.fn.visible = function() { 
    return this.css('visibility', 'visible'); 
}; 

jQuery.fn.invisible = function() { 
    return this.css('visibility', 'hidden'); 
}; 

jQuery.fn.visibilityToggle = function() { 
    return this.css('visibility', function(i, visibility) { 
     return (visibility == 'visible') ? 'hidden' : 'visible'; 
    }); 
}; 

Nếu bạn muốn quá tải bản gốc jQuery toggle(), mà tôi không khuyên bạn nên ...

!(function($) { 
    var toggle = $.fn.toggle; 
    $.fn.toggle = function() { 
     var args = $.makeArray(arguments), 
      lastArg = args.pop(); 

     if (lastArg == 'visibility') { 
      return this.visibilityToggle(); 
     } 

     return toggle.apply(this, arguments); 
    }; 
})(jQuery); 

jsFiddle.

Answer 2

Không có một xây dựng trong nhưng bạn có thể viết riêng của bạn khá dễ dàng:

(function($) { 
    $.fn.invisible = function() { 
     return this.each(function() { 
      $(this).css("visibility", "hidden"); 
     }); 
    }; 
    $.fn.visible = function() { 
     return this.each(function() { 
      $(this).css("visibility", "visible"); 
     }); 
    }; 
}(jQuery)); 

Sau đó bạn có thể gọi đây là như vậy:

$("#someElem").invisible(); 
$("#someOther").visible(); 

Dưới đây là một working example.

Answer 3

Nếu bạn chỉ cần chức năng tiêu chuẩn chỉ ẩn với chế độ hiển thị: được ẩn để giữ bố cục hiện tại, bạn có thể sử dụng chức năng gọi lại của ẩn để thay đổi css trong thẻ. Hide docs in jquery

Một ví dụ:

$('#subs_selection_box').fadeOut('slow', function() { 
     $(this).css({"visibility":"hidden"}); 
     $(this).css({"display":"block"}); 
}); 

này sẽ sử dụng hình ảnh động mát mẻ bình thường để ẩn div, nhưng sau khi kết thúc hoạt hình bạn thiết lập khả năng hiển thị để ẩn và hiển thị để chặn.

Một ví dụ:. http://jsfiddle.net/bTkKG/1/

Tôi biết bạn didnt muốn $ ("# aa") css() giải pháp, nhưng bạn không nói rõ nếu đó là vì chỉ sử dụng css() phương pháp bạn bị mất hoạt hình.

Answer 4

Một cách đơn giản hơn để làm điều này là sử dụng phương pháp toggleClass() jQuery

CSS

.newClass{visibility: hidden} 

HTML

<a href="#" class=trigger>Trigger Element </a> 
<div class="hidden_element">Some Content</div> 

JS

$(document).ready(function(){ 
    $(".trigger").click(function(){ 
     $(".hidden_element").toggleClass("newClass"); 
    }); 
});