Форум

AJIUK · #1 (**permalink**) 09.03.2014, 10:16

В js не разбираюсь, прошу вашей помощи.
Нужно сделать так, чтобы при нажатии кнопки, она перестала быть прозрачной, а при повторном нажатии, вернуть прозрачность.
У меня прозрачность при повторном нажатии не возвращается, только при нажатии на другие кнопки.
Также после одного нажатия перестает меняться прозрачность при наведении.

http://postal-rus.moy.su/help/help.html

$(function() {
   $("#links p").hide();
   $("#links h4").click(function() {
   $(this).next("p").animate({width: 'toggle'}).siblings("p:visible").animate({width: 'hide'});
   $(this).animate({opacity:'1'}).siblings("h4").animate({opacity: '0.5'});
   });
});

<div class="admin" id="links">
  <h4 style="background-image: url(image/steam.png);"><a href="#"></a></h4>
        <p class="steam">
            <a>steam id</a>
        </p>
  <h4 style="background-image: url(image/vk.png);"><a href="#"></a></h4>
        <p class="vk">
            <a>vk.com</a>
        </p>
  <h4 style="background-image: url(image/skype.png);"><a href="#"></a></h4>
        <p class="skype">
            <a>skype</a>
        </p>
</div>

рони · #2 (**permalink**) 09.03.2014, 11:22

AJIUK,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <style type="text/css">
  h4{
    width: 200px;
    height: 28px;
    background-color: #CD853F;
    opacity: 0.5;
  }
  h4 a{
    width: 100%;
    height: 100%;
  }

  </style>
  <script>
$(function () {
         $("#links p").hide();
         $("#links h4").click(function () {
             $(this).next("p").slideToggle().siblings("p:visible").slideUp();
             var opacity = $(this).css('opacity') == 1 ? 0.5 : 1;
             $(this).animate({
                 opacity: opacity
             }).siblings("h4").animate({
                 opacity: '0.5'
             });
         });
     });
  </script>
</head>

<body>
<div class="admin" id="links">
  <h4 style="background-image: url(image/steam.png);"><a href="#"></a></h4>
        <p class="steam">
            <a>steam id</a>
        </p>
  <h4 style="background-image: url(image/vk.png);"><a href="#"></a></h4>
        <p class="vk">
            <a>vk.com</a>
        </p>
  <h4 style="background-image: url(image/skype.png);"><a href="#"></a></h4>
        <p class="skype">
            <a>skype</a>
        </p>
</div>

</body>

</html>

AJIUK · #3 (**permalink**) 09.03.2014, 11:43

рони, спасибо! Теперь только нужно как-то сделать изменение при наведении, но только тех, что прозрачны.

danik.js · #4 (**permalink**) 09.03.2014, 11:44

рони, баг. Сделай двойной клик.

AJIUK · #5 (**permalink**) 09.03.2014, 11:52

danik.js, беда.

рони · #6 (**permalink**) 09.03.2014, 13:38

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <style type="text/css">
  h4{
    width: 200px;
    height: 28px;
    background-color: #CD853F;
    opacity: 0.5;

    }
  h4:hover{
    opacity: 1;
   }
  h4.show {
    opacity: 1;
  }

  h4 + p{
     display: none;
  }
  </style>
  <script>
$(function () {
         var h4 = $("#links h4");
         h4.click(function () {
             $(this).toggleClass('show');
             h4.not(this).removeClass('show')
             h4.not('.show').next().slideUp()
             $('.show + p').slideDown();
         });
     });
  </script>
</head>

<body>
<div class="admin" id="links">
  <h4 style="background-image: url(image/steam.png);"><a href="#"></a></h4>
        <p class="steam">
            <a>steam id</a>
        </p>
  <h4 style="background-image: url(image/vk.png);"><a href="#"></a></h4>
        <p class="vk">
            <a>vk.com</a>
        </p>
  <h4 style="background-image: url(image/skype.png);"><a href="#"></a></h4>
        <p class="skype">
            <a>skype</a>
        </p>
</div>

</body>

</html>

danik.js,
можно ли заменить на css анимацию строки 34 и 35
пробовал так но неполучилось

h4.show + p{
     display: block;
      height: 100%;
       -webkit-transition: all 1s ease-out 0.5s;
     -moz-transition: all 1s ease-out 0.5s;
     -o-transition: all 1s ease-out 0.5s;
     transition: all 1s ease-out 0.5s;

  }

  h4 + p{
     display: none;
     height: 0;
  }

извиняюсь за свой ~~французкий~~ css

AJIUK · #7 (**permalink**) 09.03.2014, 14:07

рони, еще раз огромное спасибо!

danik.js · #8 (**permalink**) 09.03.2014, 15:30

Сообщение от рони

можно ли заменить на css анимацию строки 34 и 35

К сожалению нельзя анимировать свойства до значения auto

Надеюсь w3c и разработчики браузеров решают или уже решили проблему.

рони · #9 (**permalink**) 09.03.2014, 16:00

вариант с css анимацией

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <style type="text/css">
  #links h4{
    width:200px;
    height:28px;
    background:#CD853F;
    opacity:0.5;
    margin:2px 0px;
  }

  #links h4:hover,#links h4.show{
    opacity:1;
  }

  #links h4.show+p{
    height:45px;
    background:#00F;
    color:#FFF;
  }

  #links h4+p{
    margin:0;
    height:0;
    overflow:hidden;
    width:200px;
    -webkit-transition:all 0.5s ease-out 0.5s;
    -moz-transition:all 0.5s ease-out 0.5s;
    -o-transition:all 0.5s ease-out 0.5s;
    transition:all 0.5s ease-out 0.5s;
  }
  </style>
  <script>
$(function () {
         var h4 = $("#links h4");
         h4.click(function () {
             $(this).toggleClass('show');
             h4.not(this).removeClass('show')
          });
     });
  </script>
</head>

<body>
<div class="admin" id="links">
  <h4 style="background-image: url(image/steam.png);"><a href="#"></a></h4>
        <p class="steam">
            <a>steam id</a>
        </p>
  <h4 style="background-image: url(image/vk.png);"><a href="#"></a></h4>
        <p class="vk">
            <a>vk.com</a>
        </p>
  <h4 style="background-image: url(image/skype.png);"><a href="#"></a></h4>
        <p class="skype">
            <a>skype</a>
        </p>
</div>

</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript