jQuery:плавное затухание изображения при наведении

StackOverflow https://stackoverflow.com/questions/831018

  •  06-07-2019
  •  | 
  •  

Вопрос

Я пытаюсь реализовать сценарий «затухания», который повлияет на два изображения:

<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");
    }
});
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top