التحقق مما إذا كان DIV موضح حاليا على الصفحة

Question

أنا أتعلم jQuery وهذا هو رمز بلدي حتى الآن:

<script type="text/javascript">
$(document).ready(function(){
    $('#login').click(function(){
        $('#login-box').fadeIn('fast');
    });
});
</script>

يعمل، عند النقر فوق الزر "تسجيل الدخول" login-box تظهر على الصفحة. ما أردت القيام به هو إذا تم النقر فوق زر تسجيل الدخول مرة أخرى، login-box سوف تتلاشى div من الصفحة. ما هي أفضل طريقة للقيام بذلك؟ كنت افكر:

$(document).ready(function(){
    $('#login').click(function(){
        if(login-box-is-showing)
        {
            $('#login-box').fadeOut('fast');
        } else {
            $('#login-box').fadeIn('fast');
        }
    });
});

لكنني مرتبك في كيفية تحديد ما إذا كان Div يظهر أم لا. أرى أيضا أن JQuery لديه وظيفة تبديل، هل سيكون ذلك أفضل؟

شكرًا.

Answer 1

من عند كارل سويدبرغ

jQuery.fn.fadeToggle = function(speed, easing, callback) { 
   return this.animate({opacity: 'toggle'}, speed, easing, callback); 
};

ثم، يمكنك القيام بذلك:

$("#login").click(function () { 
         $("#login-box").fadeToggle() 
 }); 

Answer 2

$("#login-box:visible") سوف اقول لك إذا كان مرئيا، في حين $("#login-box:hidden") يخبرك إذا لم تكن كذلك. ومع ذلك، طريقة أسهل للتعامل مع هذا هو استخدام $.toggle() او حتى $.slideToggle() إذا كنت تريد قليلا من التأثير المضافة.

Answer 3

أعتقد أنك تريد استخدامها تبديل ().