Останавливается функция.

[xTODx]

Всем привет, пока в JS не далёк, но в общем такое дело.
При наведении на картинку, у второй меняется постепенно opacity на 1, когда отводу мышу, назад на 0.
Для этого я написал вот такой вот чудо код

<script>
//IMG
function Imgopp(objid){
	var newop = 0;
	
INTERVAL = setInterval(function(){newop = newop + 0.1;
									opacity(newop);
									 }, 1);
function opacity(newop){
	if(newop < 1.1){
	var obj= $('#'+objid);
	obj.css({'opacity' : newop});
	} else if (newop >=1.1){
		var obj= $('#'+objid);
		obj.css({'opacity' : 1});
		clearInterval(INTERVAL);
		}
	return newop;
	}

}
function Imgzpp(objid){
	var newop =1;
INTERVAL = setInterval(function(){newop = newop - 0.1;
									opacity(newop);
									 }, 1);
function opacity(newop){
	if(newop >= 0.1){
	var obj= $('#'+objid);
	obj.css({'opacity' : newop});
	} else if (newop < 0.11){
		var obj= $('#'+objid);
		obj.css({'opacity' : 0});
		clearInterval(INTERVAL);
		}
	return newop;
	}

}
</script>

код html для вызова

<div id="load1" align="center">
<div id="back"  onmouseover="Imgopp('open1')" onmouseout="Imgzpp('open1')" >
<img src="img1" width="100px"  />
</div>
<div id="front">
<img id="open1" class="open" src="img2 "width="101px" />
</div>
</div>

в СSS у div#front стоит opacity : 0, постепенно меняем его до 1
почему оно останавливается, если быстро провести мышей.

[danik.js]

$('#'+objid)

jQuery детектед! Дык какого хера ты мудришь с интервалами? Есть же $().animate() или даже $().show()/hide() И где объявление переменной INTERVAL? И почему кэпслоком, это же не константа?

И вобще:

<style>
img{
    opacity: 0.5;
    transition: opacity 0.5s;
}
img:hover{
    opacity: 1;
}
</style>
<img src="https://www.google.ru/images/srpr/logo11w.png" />

[xTODx]

jQuery детектед!

Нельзя так делать?)

$().animate() или даже $().show()/hide()
вот это уже интересно)) можно подробнее, как с помощью их реализовать?

[DeUM]

$().animate({opacity: 0}, 400); //400 - speed;
$().animate({opacity: 1}, 400); //400 - speed;
либо $().fadein(400); //400 - speed;
и $().fadeout(400); //400 - speed;

[danik.js]

xTODx, а чем css не устраивает?
DeUM, fadeIn, fadeOut.

[xTODx]

$().animate({opacity: 0}, 400); //400 - speed;
$().animate({opacity: 1}, 400); //400 - speed;
либо $().fadein(400); //400 - speed;
и $().fadeout(400); //400 - speed;

Спасибо, знаете, не ловко себя чувствую теперь, долго думал, мучал себя..) а всё это решается в 1 строке))
сделал с animate, с fadeOut что то не вышло, хотя догадываюсь почему)
fadeOut/fadeIn - засекают вход/выход курсора на обьект, не?
к стати, забавно выходит, если я много раз проведу над обьектом, то цикл будет повторяться много раз)

[danik.js]

xTODx, а чем css не устраивает?

засекают вход/выход курсора на обьект, не?

Че за нах? fadeIn/fadeOut - это тупо обертка над animate. То есть под капотом у них просто напросто вызов функции .animate()

цикл будет повторяться много раз

.stop().animate()

[xTODx]

.stop().animate()

Спасибо. помогло))

[DeUM]

Спасибо, знаете, не ловко себя чувствую теперь, долго думал, мучал себя..) а всё это решается в 1 строке))
сделал с animate, с fadeOut что то не вышло, хотя догадываюсь почему)
fadeOut/fadeIn - засекают вход/выход курсора на обьект, не?
к стати, забавно выходит, если я много раз проведу над обьектом, то цикл будет повторяться много раз)

$().hover(function() { //При наведении над объектом
$().animate({'opacity': 1}, 400); // можно и так $().fadeIn(400); и так //$().fadeTo(400, 1);
},
function() { //callback
$().animate({'opacity': '.4'}, 400);// можно и так $().fadeOut(400); и так //$().fadeTo(400, 0);
})
"Масса" вариантов.

[danik.js]

xTODx, а чем css не устраивает?