2012-03-17 9 views
20

Tôi có đoạn mã sau:JQuery Visible Hiện

$('#loading').css("visibility", "visible"); 

$('#loading').show(); 

Đối với một số lý do nào đó đối với tôi khi tôi sử dụng CSS nó hoạt động!

Nhưng khi tôi sử dụng .show();

Nó không hoạt động. Xin vui lòng giúp đỡ. Tôi là người mới đối với JQuery.

Cảm ơn bạn.

Edit:

<div class="footerOrder" id="loading" style="visibility:visible;"> 
     <img src="../utils/loadingExistenz.gif" width="32" height="32" border="0" /> 
</div> 

Cố gắng này:

<div class="footerOrder" id="loading" style="display:block;"> 

Sau đó:

$('#loading').hide(); 

Và vẫn không đi vì một lý do!

EDIT: Điều kỳ lạ là nó đang hoạt động cho tất cả các DIV khác !!

Trả lời

24

Sử dụng display:none; thay vì tầm nhìn

này hoạt động tốt đối với tôi

$(function(){ 

    $("#aLink2").click(function(){ 
     $('#loading').show(); 
    }); 

});​ 

mẫu làm việc: http://jsfiddle.net/HShHg/6/

+0

Tôi thấy mẫu của bạn và nó đang hoạt động nhưng tôi không thể làm cho nó hoạt động trong trang của tôi. Bạn có nghĩ rằng có một Class cùng một lúc cũng như một ID có thể gây ra hành vi như vậy? – iTEgg

+0

id của các yếu tố phải là duy nhất. Kiểm tra xem có một số lỗi tập lệnh khác không bằng cách sử dụng tab bảng điều khiển firebug – Shyju

+0

@i. Không có nó có thể không! bạn có 'khả năng hiển thị: ẩn' trên phần tử? làm thế nào bạn đã giấu nó? – gdoron

34

jQuery's .show().hide() chỉ hoạt động trên thuộc tính CSS display, không phải trên thuộc tính visibility. Tôi vừa kiểm tra mã nguồn của jQuery 1.7 và xác minh đó là trường hợp.

Vì vậy, .css('display', 'none') sẽ được đối sánh với .show().

Nếu bạn muốn thay đổi khả năng hiển thị, bạn sẽ chỉ cần thay đổi css trực tiếp hoặc làm của riêng bạn hideV()showV() phương pháp để làm điều đó cho bạn:

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

jQuery.fn.hideV = function() { 
    this.css('visibility', 'hidden'); 
} 
+1

mặt hàng này trong các tài liệu: 'Elements với ** visibility: hidden ** hoặc opacity: 0 được coi là có thể nhìn thấy, kể từ khi họ vẫn tiêu thụ không gian trong layout.' – gdoron

+0

Đây là câu trả lời đúng. – candlejack

4

Theo các tài liệu:

.show() This is roughly equivalent to calling .css('display', 'block')

vì vậy nếu bạn nhầm lẫn với visibility, nó sẽ không giúp bạn.

gì bạn cần làm là, luôn luôn ẩn với .css('display', 'none') hoặc với .hide()


Tôi đã chỉ tìm thấy này hữu ích docs:

Elements với visibility: hidden hoặc opacity: 0 được coi là hiển thị vì chúng vẫn chiếm không gian trong bố cục.

0

tôi sẽ gắn bó với việc đưa visibility: hidden; trên các yếu tố và sau đó sử dụng .css("visibility", "visible"); để hiển thị nó chính xác bởi vì nó vẫn chiếm không gian trên trang.

Điều đó sẽ tránh các trang đáng sợ trong khi tải và Flash đáng sợ của nội dung không nhìn thấy (FOUC).

2

jQuery .show() đòi hỏi phải có tài sản display:none css

0
<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
$('div#sidebar-collapses').click(function(){ 
    if ($("#title").is(":hidden")) { 
    $("#title").show(); 
    } else if ($("#title").is(":visible")) { 
    $("#title").hide(); 
    } 
}) 

}); 
</script> 
</head> 
<body> 
<div class="sidebar-collapse" style="" id="sidebar-collapses"> 
    <a href="#" class="sidebar-collapse-icon with-animation"> 
     Test    
     <i class="menu"></i> 
    </a> 
</div> 
<a href="mysite_url" id="title" style="display:none;"> <br> My Site Name </a> 

</body> 
</html>