Форум

obli · #1 (**permalink**) 08.12.2013, 21:55

http://jsfiddle.net/7xQMR/ пример тут работает, пытаюсь для простоты засунуть это все в один html файл нефига последние что пришло в головы выкладываю тут.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">

$.fn.iconHover = function () {
return $(this).hover(
function(){$(this).stop().fadeTo("fast",1)},
function(){$(this).stop().fadeTo("slow", 0.3)}
);
}

</script>
<style type="text/css">
<script type="text/javascript">
$("div").iconHover();
$("h1").iconHover();
</script>

div,h1 {opacity:0.3; cursor

ointer;}
div {width:100px;
height:100px;
background:#0F0;
border: 5px #FFF solid;
float:left;
}
</style>

</head>

<body>

<h1>Наведите на меня</h1>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

</body>
</html>

Rise · #2 (**permalink**) 08.12.2013, 23:45

А зачем ты скрипт в стили засунул...

obli · #3 (**permalink**) 09.12.2013, 00:03

если вынести тож не работает , по всякому пробовал

Rise · #4 (**permalink**) 09.12.2013, 00:58

Сообщение от obli

если вынести тож не работает , по всякому пробовал

Но засовывать в стили то явно лишнее

$.fn.iconHover = function () { 
	return $(this).hover( 
		function(){$(this).stop().fadeTo("fast",1)}, 
		function(){$(this).stop().fadeTo("slow", 0.3)} 
	); 
} 
$(function(){
	$("div,h1").iconHover();
});

obli · #5 (**permalink**) 09.12.2013, 12:12

спс большое

а то неохото вникать полность в js из за одного примера

danik.js · #6 (**permalink**) 09.12.2013, 12:50

Сообщение от obli

неохото вникать полность в js из за одного примера

Согласен. Именно поэтому я бы предпочел такой вариант (количество js кода = 0 строк):

<!DOCTYPE html>
<html>
    <meta charset="utf-8" />
    <title></title>
    <style>
        div, h1 {
            opacity: 0.3;
            cursor: pointer;
            transition: opacity 0.6s ease-in;
        }
        div:hover, h1:hover {
            opacity: 1;
            transition: opacity 0.2s ease-out;
        }
        div {
            width:100px;
            height:100px;
            background:#0F0;
            border: 5px #FFF solid;
            float:left;
        }
    </style>
    <h1>Наведите на меня</h1>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</html>

Кстати код полностью валидный (правда не проверял)

Форум

Справочник

Discord чат

Курсы javascript