Javascript.RU

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

Анимация участка на js с opacity
Вот код
$(document).ready(function(){
    var isa = $(".inner, span.after")
    var a = $('a.flex')
    $(a).hover(
    function() {
      $(isa).animate({'opacity': 0.88}, 200)
    },
    function() {
      $(isa).animate({'opacity': 0}, 200)
    });
  });

Во вложении видно, какие они стандартные, и как меняются при наведении.
Нужно чтобы при наведении на 1 кубик менялся опасити только 1 кубика, а меняются оба, помогите, буду очень признателен!
Изображения:
Тип файла: jpg STANDART1111.jpg (11.4 Кб, 5 просмотров)
Тип файла: jpg ПРИ НАВЕДЕНИИ1111.jpg (7.1 Кб, 4 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 28.11.2015, 17:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

walker1232,
может css хватит без скрипта? и где минимальный html
Ответить с цитированием
  #3 (permalink)  
Старый 28.11.2015, 18:55
Интересующийся
Отправить личное сообщение для walker1232 Посмотреть профиль Найти все сообщения от walker1232
 
Регистрация: 28.11.2015
Сообщений: 24

<div class="hex grid-4 invert " style="opacity: 1;">
<a href="/project/slice" style="background-image: url(/uploads/work/300/124022040.jpg);" title="Slice" class="flex">
<div class="inner" style="opacity: 0;">
<i class="ss-icon ss-standard huge">
Ответить с цитированием
  #4 (permalink)  
Старый 28.11.2015, 19:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

walker1232,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .invert  .inner {
    opacity: 0;
    -webkit-transition: all .2 ease-in-out;
    -moz-transition: all .2 ease-in-out;
    -o-transition: all .2 ease-in-out;
    transition: all .2 ease-in-out;
  }
  .invert:hover  .inner {
    opacity: .8;
  }
  </style>
</head>

<body>
  <div class="hex grid-4 invert" >    hover
    <a href="/project/slice" style="background-image: url(/uploads/work/300/124022040.jpg);" title=
    "Slice" class="flex">
    <div class="inner">12345</div></a>
  </div>
</body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 28.11.2015, 19:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

walker1232,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #6 (permalink)  
Старый 28.11.2015, 19:24
Интересующийся
Отправить личное сообщение для walker1232 Посмотреть профиль Найти все сообщения от walker1232
 
Регистрация: 28.11.2015
Сообщений: 24

Дело в том, что там происходит какой-то конфликт с css кодом, и через него не получается использовать этот самый css. Так что нужно использовать js, а я в нем не спец
<div class="hex grid-4 invert " style="opacity: 1;">
    <a href="/project/slice" style="background-image: url(/uploads/work/300/124022040.jpg);" title="Slice" class="flex">
        <div class="inner" style="opacity: 0.88;">
            <i class="ss-icon ss-standard huge"></i>
            <h3 class="flex">Slice</h3>
        </div>
            
        <div class="hex-1"><span class="after" style="opacity: 0.88;"></span></div>
        <div class="hex-2"><span class="after" style="opacity: 0.88;"></span></div>
        <span class="after" style="opacity: 0.88;"></span>
    </a>
</div>
Ответить с цитированием
  #7 (permalink)  
Старый 28.11.2015, 20:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

walker1232,
надо перенести style в css и убрать из кода, тогда скрипт будет ненужен.
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  a{
    display: block;
     background-repeat: no-repeat;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
       var s = $(".block_info_main span");
       s.click(function() {
         s.not(this).removeClass("orange");
         $(this).toggleClass("orange");
      });
});

$(document).ready(function(){
    var a = $('a.flex')
    a.hover(
    function() {
      $(".inner, span.after", this).stop(true,true).animate({'opacity': 0.88}, 200)
    },
    function() {
      $(".inner, span.after", this).stop(true,true).animate({'opacity': 0}, 200)
    });
  });

  </script>
</head>

<body>  <div class="hex grid-4 invert " style="opacity: 1;">
    <a href="/project/slice" style="background-image: url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif);" title="Slice" class="flex">
        <div class="inner" style="opacity: 0.88;">
            <i class="ss-icon ss-standard huge">������</i>
            <h3 class="flex">Slice</h3>
        </div>

        <div class="hex-1"><span class="after" style="opacity: 0.88;"></span></div>
        <div class="hex-2"><span class="after" style="opacity: 0.88;"></span></div>
        <span class="after" style="opacity: 0.88;"></span>
    </a>
</div>
<div class="hex grid-4 invert " style="opacity: 1;">
    <a href="/project/slice" style="background-image: url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif);" title="Slice" class="flex">
        <div class="inner" style="opacity: 0.88;">
            <i class="ss-icon ss-standard huge">������</i>
            <h3 class="flex">Slice</h3>
        </div>

        <div class="hex-1"><span class="after" style="opacity: 0.88;"></span></div>
        <div class="hex-2"><span class="after" style="opacity: 0.88;"></span></div>
        <span class="after" style="opacity: 0.88;"></span>
    </a>
</div>


</body>

</html>
Ответить с цитированием
  #8 (permalink)  
Старый 28.11.2015, 20:41
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

$(function(){
    $('a.flex').on('mouseover mouseout', function(e) {
      $('.inner, span.after', this).stop(true, true).animate({opacity: 0.88 * (e.type == 'mouseover')}, 200);
    }
});
Ответить с цитированием
  #9 (permalink)  
Старый 28.11.2015, 21:02
Интересующийся
Отправить личное сообщение для walker1232 Посмотреть профиль Найти все сообщения от walker1232
 
Регистрация: 28.11.2015
Сообщений: 24

спасибо большое ) очень помогли плюсую вам ) и еще 1 вопросик
как из этого кода
$(function(){
    $('a.armg, a.lions-hand').on('mouseover mouseout', function(e) {
      $('span.after', this).stop(true, true).animate({opacity: 0.88 * (e.type == 'mouseover')}, 200);
    });
  });

Сначала у объекта опасити 1, и при наводе сделать чтобы менялся на 0.88, а потом опять на 1?
Ответить с цитированием
  #10 (permalink)  
Старый 28.11.2015, 21:07
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

$(function(){
    $('a.armg, a.lions-hand').on('mouseover mouseout', function(e) {
      $('span.after', this).stop(true, true).animate({opacity: 1 - 0.22 * (e.type == 'mouseover')}, 200);
    });
});
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вакансия JavaScript разработчик / JS / Frontend developer (Санкт-Петербург) Сергей Грачёв Работа 0 21.09.2015 12:31
Анимация после анимации Narahon Элементы интерфейса 12 02.04.2015 22:06
Пример тестовых заданий на js junior elshaarawy Учебные материалы 3 26.03.2015 15:17
Анимация из PNG и JS. Solovei95 Ваши сайты и скрипты 6 14.10.2011 05:57
Картинка обрабатывается js 4yBaK Общие вопросы Javascript 10 11.09.2011 09:28