Форум

zevilz · #11 (**permalink**) 11.08.2013, 20:34

Прописал в одном элементе в rel два значения через пробел
в скрипте изменил код на этот:

var arr = thisItem.split(/\s+/);

	$('.item li[rel='+arr[0]+']').stop()
		.animate({'width' : imgWidth, 
			 'opacity' : 1, 
			 'marginRight' : '.5em', 
			 'marginLeft' : '.5em'
		}, 700 );
	if (arr[1]) {
		$('.item li[rel='+arr[1]+']').stop()
			.animate({'width' : imgWidth, 
				 'opacity' : 1, 
				 'marginRight' : '.5em', 
				 'marginLeft' : '.5em'
			}, 700 );
	}

	$('.item li[rel!='+arr[0]+']').stop()
		.animate({'width' : 0, 
			 'opacity' : 0,
			 'marginRight' : 0, 
			 'marginLeft' : 0
		}, 700 );
	if (arr[1]) {
		$('.item li[rel!='+arr[1]+']').stop()
			.animate({'width' : 0, 
				 'opacity' : 0,
				 'marginRight' : 0, 
				 'marginLeft' : 0
	               }, 700 );
        }

Не работает. Может что не правильно где?

zevilz · #12 (**permalink**) 11.08.2013, 20:47

что-то я фигню какую-то написал. в thisItem же только одно число...

рони · #13 (**permalink**) 11.08.2013, 22:24

zevilz,
непонятно что за проблему вы решаите ...

просто немного сократил ваш код ...

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style>
ul {
	margin: 0;
	text-align: left;
}

ul.menu {
	margin-left: .5em;
	margin-bottom: 1em;
}

ul.menu li {
	list-style-type: none;
	display: inline-block;
	font-weight: bold;
	text-shadow: 1px 1px 0px #f3f5da;
	padding: 2px 15px;
}

	.selected {
		-webkit-border-radius: 15px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		background: #acac75;
		-webkit-box-shadow: 1px 1px 0px #8c8c5d;
	}

	.selected a, .selected a:visited {
		text-shadow: 1px 1px 0px #8c8c60;
		color: #fff;
	}

ul.item li {
	list-style-type: none;
	display: block;
	float: left;
	margin: .5em;
}

	ul.item li img {
		border: 5px solid #fff;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		-webkit-box-shadow: 0px 0px 5px #ac987e;
		-moz-box-shadow: 0px 0px 5px #ac987e;
		box-shadow: 0px 0px 5px #ac987e;
	}


a, a:visited {
	color: #161616;
	text-decoration: none;
}
</style>
</head>

<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>

  	<script type="text/javascript">
    $(document).ready(function()
      {

        var mli = $('.menu li'), ili = $('.item li');
        mli.click(function()
          {

            mli.removeClass('selected');
            $(this).addClass('selected');
            var  imgWidth = '52px',
            thisItem = $('a', this).attr('rel');

            ili.stop().animate(
             {'width': 0, 'opacity': 0,
              'marginRight': 0,
              'marginLeft': 0
              }
            ).filter('[rel~="'+thisItem+'"]').animate(
             {'width': imgWidth,
              'opacity': 1,
              'marginRight': '.5em',
              'marginLeft': '.5em'
              }
            );
            ;
          }
        )

        $('img', ili).animate({'opacity': 0.5}).hover(function()
          {
            $(this).animate({'opacity': 1});
          }, function() {
            $(this).animate({'opacity': 0.5});
          }
        );

      }
    );
   </script>

	<ul class="menu">
		<li class="selected"><a href="#" rel="all">Все уроки</a></li>
		<li><a href="#" rel="jquery">jQuery</a></li>
		<li><a href="#" rel="css">CSS</a></li>
		<li><a href="#" rel="php">PHP</a></li>
	</ul>

	<ul class="item">
		<li rel="jquery  all"><a href="" target="_blank"><img src="rhttgbh" /></a></li>
		<li rel="jquery all"><a href="" target="_blank"><img src="edhdethg" /></a></li>
		<li rel="css all"><a href="" target="_blank"><img src="hetrheth" /></a></li>
		<li rel="css all"><a href="" target="_blank"><img src="rthrtg" /></a></li>
		<li rel="php all"><a href="" target="_blank"><img src="ethetrh" /></a></li>
		<li rel="jquery all"><a href="" target="_blank"><img src="hetr" /></a></li>
		<li rel="css all"><a href="" target="_blank"><img src="werhewrt" /></a></li>
		<li rel="php all"><a href="" target="_blank"><img src="wtrhwetr" /></a></li>
	</ul>

</body>

</html>

zevilz · #14 (**permalink**) 12.08.2013, 16:59

Спасибо. Как раз то, что нужно. Теперь все нормально работает

А можно сделать, чтобы не убирались те элеметы, которые потом появляются?

Форум

Справочник

Discord чат

Курсы javascript