Javascript-форум - Анимация участка на js с opacity

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Анимация участка на js с opacity (https://javascript.ru/forum/misc/59819-animaciya-uchastka-na-js-s-opacity.html)

Анимация участка на 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 кубика, а меняются оба, помогите, буду очень признателен! :thanks:

walker1232,
может css хватит без скрипта? и где минимальный html

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>

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

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

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Дело в том, что там происходит какой-то конфликт с 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>

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>

$(function(){
    $('a.flex').on('mouseover mouseout', function(e) {
      $('.inner, span.after', this).stop(true, true).animate({opacity: 0.88 * (e.type == 'mouseover')}, 200);
    }
});

спасибо большое ) очень помогли плюсую вам ) и еще 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?

$(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);
    });
});