Нет прозрачности, если элемент не виден - PullRequest
Новая
       6

Нет прозрачности, если элемент не виден

0 голосов
/ 08 апреля 2011

Как получить такой эффект, что если отображается сообщение об ошибке, форма не должна потерять свою непрозрачность, но если сообщение об ошибке скрыто, прозрачность следует применять только при наведении формы?

HTML: 

<section>
    <form id="form" name="form" action="login.php" method="post">  

    <ul>
        <li>
        <span class="er" style="display:none;">&nbsp;</span>
        </li> <br />

        <li>
        <label for="name">Name</label>  
        <input type="text" name="name" id="name" />       
        </li>

        <li> 
        <label for="pass">Password</label>  
        <input type="password" name="pass" id="pass" />  
        </li>

    </ul>
        <input type="submit" value="Log In" />  

</form>  
</section>

CSS: 

section { 
     opacity: 0.5;
     transition: all 1s ease-in-out;
     -webkit-transition: all 1s ease-in-out;
     -moz-transition: all 1s ease-in-out;
     -o-transition: all 1s ease-in-out;  
}

section:hover{
    opacity: 100;
     transition: all 1s ease-in-out;
     -webkit-transition: all 1s ease-in-out;
     -moz-transition: all 1 ease-in-out;
     -o-transition: all 1s ease-in-out;
}

JQuery: 

$('#form').bind('submit', function (e) {
            var self = $(this);

            jQuery.post(self.attr('action'), self.serialize(), function (response) {
                if ($("#name").val() == "" || $("#pass").val() == "") {
                    $("span.er").text('Field cannot be blank!');
                                    $("span.er").show();    
                }
                else if (response.success) {
                    window.location.href='home.php';
                } else {
            $("span.er").text('Invalid username or password! Please try again.');
                    $("span.er").show();
                }
            }, 'json');

            e.preventDefault(); //prevent the form being posted 
        });

Я пытался добавить эту строку в вышеупомянутую функцию jQuery, где span.er установлен на show(): 

$("section").css('opacity', '100');

^ Этот параметр следует применять только тогда, когда span.er является видимым. Однако проблема заключается в том, что после отображения сообщения об ошибке настройка непрозрачности применяется независимо от того, является ли span.er видимым или скрытым.

Ответы [ 2 ]

1 голос
/ 08 апреля 2011

вместо манипулирования видимостью диапазона, если появится сообщение об ошибке, вы можете добавить класс er к самому родительскому элементу section

оттуда вы можете контролировать видимость фактического li, содержащего ваше сообщение, например, 

section li:first-child {display: none;}
section.er li:first-child {display: block;}

и одновременно парящие переходы: 

section { 
     display: block;
     opacity: 0.5;
     transition: all 1s ease-in-out;
     -webkit-transition: all 1s ease-in-out;
     -moz-transition: all 1s ease-in-out;
     -o-transition: all 1s ease-in-out;  
}

section.er, section:hover {
    opacity: 100;
     transition: all 1s ease-in-out;
     -webkit-transition: all 1s ease-in-out;
     -moz-transition: all 1 ease-in-out;
     -o-transition: all 1s ease-in-out;
}

все, что нужно сделать jQuery, это добавить или удалить имя класса из раздела, в зависимости от того, прошла ли форма проверку или нет

0 голосов
/ 08 апреля 2011 
$('form').mouseover(function (){
  $('span.er').css('opacty':1);
  if(!$("span.er:visible")){
     $('form').css({'opacity',0.5});
  }
});

И вам очень трудно понять, что вы запутали нас в этом, поместите это в пункт, обозначающий действия и их приоритет, если вам будет трудно

как и в приведенном выше коде, когда пользователь наведет курсор мыши на тег <form>, он изменит непрозрачность на единицу, если его не видно, что будет 0,5 или 50%

...