jQuery:плавное затухание изображения при наведении
Вопрос
Я пытаюсь реализовать сценарий «затухания», который повлияет на два изображения:
<script type="text/javascript">
$(document).ready(function(){
$('img').mouseover( function() {
$(this).fadeOut(200, function() {
$(this).attr({'src':'http://example/images/image.png'});
if (this.complete) $(this).fadeIn(500);
});
});
});
</script>
Этот фрагмент jQuery дает мне следующее:
1 - Сначала изображение исчезает и исчезает 2 - затем, из пустого пространства, оно становится новым.
Поэтому я хотел бы улучшить сценарий, чтобы добиться настоящего эффекта «затухания».
На данный момент я изучаю два замечательных ресурса:
- Плагин цикла - очень круто (я постараюсь добиться эффекта цикла при наведении курсора)
- JQuery для дизайнеров круто, но у меня была куча проблем с IE (странная черная пиксельная рамка на FadeIn).
Большое спасибо, если кто-то может указать на возможное дополнительное решение.
Ян
РЕДАКТИРОВАТЬ :CSS-трюк/решение здесь http://paragraphe.org/stackoverflowdemos/crossfade-images/
Решение 2
Недавно я нашел решение, ориентированное на CSS:абсолютное позиционирование изображения «поверх» другого, его исчезновение до 0 с помощью jQuery в готовом документе и полное исчезновение при наведении курсора мыши/снова исчезновение до 0 при наведении курсора мыши.
Другие советы
То, как вы вызываете второе затухание, поскольку обратный вызов исходному затуханию гарантирует, что они выполняются одно за другим.
Может с этим повезет больше
$('img').mouseover( function() {
$(this).fadeOut(200);
$(this).attr({'src':'http://example/images/image.png'});
if (this.complete) $(this).fadeIn(500);
});
Хотя время загрузки второго изображения по-прежнему будет зависеть от вашего желания, если только оно не будет где-то предварительно загружено.
Это своего рода длительное исправление, но я делаю это, чтобы добиться плавного затухания.Я использую Fadeout, затем в качестве обратного вызова использую $.ajax для фактической загрузки нового изображения, а затем использую успех:функция этого, чтобы добавить в div (или img), затем используйте полную:функция, чтобы затемнить его.Это приводит к плавному затуханию-новому содержимому-затуханию.
Вот пример загрузки php-файла, принцип тот же, что и с изображением:
$("#leftbar").fadeOut("normal", function() {
$.ajax({
url: "bin/leftBar.php",
cache: "false",
success: function(data) {
$("#leftbar").html(data);
},
complete: function() {
$("#leftbar").fadeIn("normal");
}
});