Форум

Kurt_89 · #1 (**permalink**) 23.04.2011, 19:07

<script type="text/javascript" src="jquery-1.5.2.js"></script>
<script type="text/javascript">
function showing(img) {
$('#mainpic').fadeTo(500, 0);
setTimeout(loading(img),500);
$('#mainpic').fadeTo(500, 1);
}
function loading(img){
if (img == '#') {
mainpic.src = 'images/mainpic.png';
} else {
mainpic.src = img;	
}
}
</script>

<img src="images/cat1.png" onMouseMove="showing('images/main1.png');" onmouseout="showing('#');">

При наведении картинка должна плавно меняться, при выходе из поля должна возвращаться прежняя картинка. В данном случае все начинает моргать, как этого избежать?

walik · #2 (**permalink**) 23.04.2011, 19:56

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
function show() {
	$('#img').fadeOut(function() {
		$('#img').attr('src', 'http://javascript.ru/forum/images/smilies/angry.gif');
		$('#img').fadeIn();
	});
}

function hide() {
	$('#img').fadeOut(function() {
		$('#img').attr('src', 'http://javascript.ru/forum/images/smilies/smile.gif');
		$('#img').fadeIn();
	});
}
</script>
</head>
<body>
<img src="http://javascript.ru/forum/images/smilies/smile.gif" width="50" id="img" onmouseover="show();" onmouseout="hide();" />
</body>
</html>

dmitriymar · #3 (**permalink**) 23.04.2011, 20:01

walik,
быстро наводи-отводи мышь раз 5-10-увидишь результат)джиквери.....

walik · #4 (**permalink**) 23.04.2011, 20:22

Да знаю)))
Но дорабатывать не мое дело, я как бы просто идею дал)

Lucidmind · #5 (**permalink**) 03.05.2011, 16:18

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

walik,
быстро наводи-отводи мышь раз 5-10-увидишь результат)джиквери.....

Возможно это лечится добавлением метода Stop() от таким образом:

...
$('#img').stop().fadeIn();
...

Форум

Справочник

Discord чат

Курсы javascript