Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Смена картинок методом плавного исчезновения (https://javascript.ru/forum/dom-window/16814-smena-kartinok-metodom-plavnogo-ischeznoveniya.html)

Kurt_89 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 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 23.04.2011 20:01
walik,
быстро наводи-отводи мышь раз 5-10-увидишь результат)джиквери.....

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

Lucidmind 03.05.2011 16:18
Цитата:
Сообщение от dmitriymar (Сообщение 101905)
walik,
быстро наводи-отводи мышь раз 5-10-увидишь результат)джиквери.....
Возможно это лечится добавлением метода Stop() от таким образом:

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


Часовой пояс GMT +3, время: 01:57.