Форум

walker1232 · #1 (**permalink**) 28.11.2015, 17:04

Вот код

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

рони · #2 (**permalink**) 28.11.2015, 17:22

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

walker1232 · #3 (**permalink**) 28.11.2015, 18:55

рони · #4 (**permalink**) 28.11.2015, 19:14

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

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

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

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

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

walker1232 · #6 (**permalink**) 28.11.2015, 19: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

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>

ruslan_mart · #8 (**permalink**) 28.11.2015, 20:41

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

walker1232 · #9 (**permalink**) 28.11.2015, 21:02

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

ruslan_mart · #10 (**permalink**) 28.11.2015, 21:07

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

Форум

Справочник

Discord чат

Курсы javascript