Просто Div Opacity Fade на Focus с помощью mootools - PullRequest
Новая
       55

Просто Div Opacity Fade на Focus с помощью mootools

2 голосов
/ 09 февраля 2009

У меня есть пара элементов на странице, которые содержат простой HTML и изображения. У каждого элемента div есть свои уникальные идентификаторы.

Мне бы хотелось, чтобы при загрузке страницы содержимое div составляло, скажем, 60%, но при наведении курсора на 100%. При наведении мыши они вернутся к 60%.

Сайт встроен в Joomla 1.5.x , поэтому уже загружается библиотека mootools 1.11 . Я искал пример кода в сети и нашел много ссылок для затухания непрозрачности изображений с помощью jQuery, но не так уж много для mootools.

Любые указатели приветствуются:)

Ответы [ 3 ]

0 голосов
/ 09 февраля 2009

Нашли решение, ну вроде. Работает в mootools 1.2.1. Я подправил код для исчезновения div'ов, а не img.

Я положил это в мою голову: 

<script type="text/javascript"  src="mootools-1.2.1-core-yc.js"></script>  
<script type="text/javascript">

    var fade_in = 1;
    var fade_out = 0.5;

</script>
</head>
<body onload="$$('div.box_panel').fade(0.5);">

а потом это на моих делах. 

<div id="box1" class="box_panel" onmouseover="this.fade(fade_in);" onmouseout="this.fade(fade_out);">
        <h2>Box One</h2>
        <p>This is a content box and some sample content to pad it out.</p>
</div>

Проблема сейчас в том, что я не уверен, как получить такой же эффект в 1.11

0 голосов
/ 13 января 2017

Вместо этого используйте переход CSS3. Это намного проще. Смотри (http://www.w3schools.com/css/css3_transitions.asp)

div.box_panel {
    opacity: 0.6;
    filter: alpha(opacity=60);
    -webkit-transition: opacity .5s linear;
    -moz-transition: opacity .5s linear;
    -ms-transition: opacity .5s linear;
    -o-transition: opacity .5s linear;
    transition: opacity .5s linear;
}

div.box_panel:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}
0 голосов
/ 09 февраля 2009

Возможно, вам удастся обернуть изображение в элемент div и использовать что-то подобное для выцветания? 

Fx.Style("div1", "opacity").start(1.0);
...