Javascript Fadein при наведении мыши работает, но не исчезает - PullRequest
Новая
       12

Javascript Fadein при наведении мыши работает, но не исчезает

0 голосов
/ 06 января 2012

Так просто, я понял, как добавить деление при вызове при наведении курсора мыши.Но я хочу знать, как его затухать, не дублируя javascript, противоположный тому, который он есть, и связывая его с onmouseout.

Вот мой Javascript: 

<script type="text/javascript">
    function fadein(objectID){
object = document.getElementById(objectID);
object.style.opacity = '0';

animatefadein = function (){
 if(object.style.opacity < 1){   
 var current = Number(object.style.opacity);     
var newopac = current + 0.1;
object.style.opacity = String(newopac);     
setTimeout('animatefadein()', 100);
}
}
animatefadein();
}

иhtml 

<div id="rolloverwrapper" style="opacity:0;"></div>
<div id="wrapper">
    <div id="content">
        <div id="button">
            <img src="images/dj.png" onmouseover="fadein('rolloverwrapper');"/>
        </div>
    </div>
</div>

Ответы [ 3 ]

1 голос
/ 06 января 2012

Попробуйте что-то вроде этого: 

<script type="text/javascript">
    function fade(objectID, amount) {
        var MIN_OPACITY = 0;
        var MAX_OPACITY = 1;

        object = document.getElementById(objectID);

        animatefade = function() {
            if(object.style.opacity < MAX_OPACITY && object.style.opacity > MIN_OPACITY){   
                var current = Number(object.style.opacity);     
                var newopac = current + amount;
                object.style.opacity = String(newopac);     
                setTimeout('animatefade()', 100);
            }
        }
        animatefade();
    }
</script>

Со следующим HTML: 

<img src="images/dj.png" onmouseover="fade('rolloverwrapper', 0.1);" onmouseout="fade('rolloverwrapper', -0.1);"/>
0 голосов
/ 06 января 2012

Добавьте параметр в вашу функцию постепенного изменения, чтобы указать направление постепенного изменения.1 / -1, 0/1, t / f и т. Д. ... и передайте это своему animatefadein.

Тогда у вас будет 

<img src="..." onmouseover="fadein('rolloverwrapper', 1)" onmouseout="fadein('rolloverwrapper, 0)" />

Однако вы должны посмотретьв использовании jquery для такого рода вещи.Библиотека будет «тяжелой» по сравнению с этими несколькими строками JS, но полученная вами гибкость огромна.

0 голосов
/ 06 января 2012

Если желаемое поведение противоположно тому, что у вас уже есть, но на другом событии, просто сделайте это.Не ищите причудливых решений, если вы уже знаете простое, и оно работает.

...