Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.03.2014, 10:16
Новичок на форуме
Отправить личное сообщение для AJIUK Посмотреть профиль Найти все сообщения от AJIUK
 
Регистрация: 09.03.2014
Сообщений: 4

Изменение прозрачности при клике
В 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #3 (permalink)  
Старый 09.03.2014, 11:43
Новичок на форуме
Отправить личное сообщение для AJIUK Посмотреть профиль Найти все сообщения от AJIUK
 
Регистрация: 09.03.2014
Сообщений: 4

рони, спасибо! Теперь только нужно как-то сделать изменение при наведении, но только тех, что прозрачны.
Ответить с цитированием
  #4 (permalink)  
Старый 09.03.2014, 11:44
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

рони, баг. Сделай двойной клик.
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #5 (permalink)  
Старый 09.03.2014, 11:52
Новичок на форуме
Отправить личное сообщение для AJIUK Посмотреть профиль Найти все сообщения от AJIUK
 
Регистрация: 09.03.2014
Сообщений: 4

danik.js, беда.
Ответить с цитированием
  #6 (permalink)  
Старый 09.03.2014, 13:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064


<!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
Ответить с цитированием
  #7 (permalink)  
Старый 09.03.2014, 14:07
Новичок на форуме
Отправить личное сообщение для AJIUK Посмотреть профиль Найти все сообщения от AJIUK
 
Регистрация: 09.03.2014
Сообщений: 4

рони, еще раз огромное спасибо!
Ответить с цитированием
  #8 (permalink)  
Старый 09.03.2014, 15:30
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от рони
можно ли заменить на css анимацию строки 34 и 35
К сожалению нельзя анимировать свойства до значения auto

Надеюсь w3c и разработчики браузеров решают или уже решили проблему.
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #9 (permalink)  
Старый 09.03.2014, 16:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

вариант с 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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При клике на ссылку ничего не происходит gurg0n Элементы интерфейса 2 24.06.2013 11:11
Скролл вверх при клике ie6/7/8 dr_gluk jQuery 0 21.03.2012 11:12
Вопрос по jquery. Как запретить один из скриптов при клике vuler Общие вопросы Javascript 1 07.03.2012 22:35
Изменение изображения при наведении mishko_o Элементы интерфейса 4 24.10.2011 16:20
Закрыть элемент при клике вне его masterm Общие вопросы Javascript 3 31.07.2009 11:27