Fading div in/out, нажав другой div

У меня есть элемент div. Нажав на него, он показывает другой div, используемый для входа. Вход div содержит еще один div, login-close, который скроет div для входа в систему. Я борюсь с необходимым jQuery. Вот то, что я до сих пор:Fading div in/out, нажав другой div

<html> 
    <div class="member"></div> 
    <div class="login"> 
     <div class="login-close"></div> 
    </div> 
</html>

.member { 
    width: 80px; 
    height: 67px; 
    float: right; 
    background-color: #4CA502; 
    background-image: url(../images/social-icon/dark/member.png); 
    background-repeat: no-repeat; 
    background-position: center center; 
} 
.login { 
    width: 300px; 
    height: 400px; 
    background: #090; 
    margin: 0px; 
    padding: 0px; 
    display: none; 
    position: absolute; 
    right: 0; 
    top: 87px; 
} 
.login-close { 
    background: #093; 
    position: absolute; 
    width: 30px; 
    height: 30px; 
    top: -30px; 
    margin: 0; 
    padding: 0; 
}

$(document).ready(function() { 
    $(".member").click(function() { 
     $(this).next(".login").fadeIn(1000);   
    }); 
    $(".login-close").click(function() { 
     $(this).next(".login").fadeOut(1000); 
    }); 
});

источник

2015-04-08 snopin

Кнопка закрытия является потомком входа DIV так .next('.login') не будет работать, вместо этого вы можете использовать .closest('.login') найти предка .login элемент

$(document).ready(function() { 
 
    $(".member").click(function() { 
 
    $(this).next(".login").fadeIn(1000); 
 

 
    }); 
 
    $(".login-close").click(function() { 
 
    $(this).closest(".login").fadeOut(1000); 
 
    //or use .parent() since these are direct parent-child elements 
 
    //$(this).parent().fadeOut(1000); 
 
    }); 
 
});

.member { 
 
    width: 80px; 
 
    height: 67px; 
 
    float: right; 
 
    background-color: #4CA502; 
 
    background-image: url(../images/social-icon/dark/member.png); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
} 
 
.login { 
 
    width: 300px; 
 
    height: 400px; 
 
    background: #090; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    display: none; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 87px; 
 
} 
 
.login-close { 
 
    background: #093; 
 
    position: absolute; 
 
    width: 30px; 
 
    height: 30px; 
 
    top: -30px; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="member"></div> 
 
<div class="login"> 
 
    <div class="login-close"></div> 
 
</div>

Demo: Fiddle

источник

2015-04-08 09:27:17

просто есть, не знаю make.Thank Вы !! – snopin

$(document).ready(function() { 
    $(".member").click(function() { 
    $(this).next(".login").fadeIn(1000);   
    }); 
    $(".login-close").click(function() { 
    $(".login").fadeOut(1000); 
    }); 
});

источник

2015-04-08 10:00:31

Пожалуйста, объясните, что вы измените и почему ... Просто конус - это не ответ –

Моя ошибка, код сценария хорош !!! Спасибо, в любом случае!! – snopin

рад помочь вам ... и если вы удовлетворены ответом, вы можете принять его –

Fading div in/out, нажав другой div

ответ

Смежные вопросы