jquery css function doesn't work for detecting element shown/hidden

Question

My code:

<script type="text/javascript">
    $(function(){
        $("body").click(function(){
            $("ul").toggle("slow");
            var b = $("ul").css("display");
            console.log("ul display :"+b);// unfortunately,always returns block!
    });
});
</script>
</head>
<body>
    <nav>
        <ul>
            <li><a href="/">home</a></li>
            <li><a href="/archive/">Archive</a></li>
            <li><a href="/about/">About</a></li>
            <li><a href="/contact/">Contact</a></li>
        </ul>
    </nav>
</body>
</html>

I use jquery toggle() function to show/hide. But toggle() doesn't change css value, so you can't use .css("display") function to check the state of display.Even elements are hidden, .css("display") always returns "block", if your original css sheet defines "display:block;".

How do you detect display state which meens that if the element is shown or hidden? Or, do you know the way to change real display value which toggle() couldn't achieve?

note: you can't use the way shown below, because the previous code is test code and in real codes, toggle() and .css("display") are in different functions and excuted in completely different timing.

$("ul").toggle("slow", function() {
  ...
}

Dupe: http://stackoverflow.com/questions/178325/testing-if-something-is-hidden-with-jquery — Dan, Jul 23 '13 at 13:12
var c = $("ul").is(":visible"); console.log("ul isvisible :"+c);// unfortunately, **always returns true!!** after toggles. — John.A., Jul 23 '13 at 13:19

score 2 · Answer 1 · answered Jul 23 '13 at 13:15

2

I think the main problem here is that the code is not waiting for the animation to complete when checking the state so it is actually still visible when it runs.

If you check the state after the animation is completed (in the callback function) it correctly returns none:

$("body").click(function(){
    $("ul").toggle("slow", function() {
        var b = $("ul").css("display");
        console.log("ul display :"+b); // This will return none
    });
    var b = $("ul").css("display");
    console.log("ul display :"+b); // This will return block
});

This example will display block immediately then none after hiding the element - http://jsfiddle.net/Vw9nA/

But as stated in the comments and the other linked question, the best way to check visibility is $('ul').is(':visible')

answered Jul 23 '13 at 13:15

Richard Dalton

34,315
6
69
88

timing of completion may not be the problem, because even I wait 10sec after toggle finished, even with another PC, results are same. – John.A. Jul 23 '13 at 13:27
Ok, so the only solution is returning b from the function in toggle() and pass it to another function as argument, right? – John.A. Jul 23 '13 at 13:52
@John.A. Anything that relies on the toggle being completed should be called from inside the callback function of the toggle. – Richard Dalton Jul 23 '13 at 13:56
I understand, but the other famous solution;$('ul').is(':visible'), doesn't work solely, ( maybe it only works in toggle() function, for instance... ,) so stackoverflow.com/questions/178325/… appears not precise! – John.A. Jul 23 '13 at 14:00

score 0 · Answer 2 · answered Jul 23 '13 at 13:17

0

$(function(){
  $("body").click(function(){
     $("ul").toggle("slow",function(){
         console.log($(this).css('display')); //none
      });
    });
});

answered Jul 23 '13 at 13:17

lashab

186
1
7

Sorry, I should have told that toggle() and display-detection are in another function and in another timing! So, I can't say your code is the solution. – John.A. Jul 23 '13 at 13:30

jquery css function doesn't work for detecting element shown/hidden

2 Answers2