Как напрямую перейти на другое изображение (без каких-либо задержек) с помощью jquery? - PullRequest
Новая
       22

Как напрямую перейти на другое изображение (без каких-либо задержек) с помощью jquery?

1 голос
/ 02 сентября 2011

Мой код работает, но он не исчезает непосредственно ко второму изображению: исчезает первое изображение -> задержка -> исчезает во втором.Как я могу постепенно перейти ко второму изображению?

Мой код JQuery 

$(document).ready(function() {
    var std = $(".fadeim").attr("src");
    var hover = std.replace(".png", "-hover.png");
    $(".fadeim")
        .mouseover(function() {   
            $(this).fadeOut("fast",function(){  
                $(this).attr("src", hover);  
                $(this).fadeIn("fast");  
            });  
        })  
        .mouseout(function() {  
            $(this).fadeOut("fast",function(){  
                $(this).attr("src", std);  
                $(this).fadeIn("fast");           
            });  
        })  
    }); 
});

Ответы [ 5 ]

3 голосов
/ 02 сентября 2011

Вы можете сделать следующее [что я обычно делаю]:

Вы можете проверить мою ссылку для тестирования: http://jsfiddle.net/fJFmx/1/

Я установил контейнер [фиксированная ширина и высота] для изображений.Установите стиль для изображений в положение: абсолютное и с фиксированными размерами.

Пример HTML: 

<div id='slideContainer'>
    <img src='http://www.ct4me.net/images/dmbtest.gif' />
    <img src='http://pievscake.com/images/test.jpg' />
</div>

Затем Jquery: 

$(function() {

    $('#slideContainer img:first').fadeIn();

    $('#slideContainer').hover(function() {
        $('#slideContainer img:first').fadeOut();
        $('#slideContainer img:last').fadeIn();
    }, function() {
        $('#slideContainer img:first').fadeIn();
        $('#slideContainer img:last').fadeOut();
    });

});

CSS 

#slideContainer {border:1px solid #ffcc00;width:50px; height:50px;}
#slideContainer img {position:absolute; width:50px; height:50px; display:none;}

Надеюсь, это поможет.

2 голосов
/ 02 сентября 2011

Возможно, вы захотите использовать CSS3 для того, что вы пытаетесь сделать вместо этого, так как изображение не изменится, если у кого-то отключен JavaScript. Попробуйте этот CSS: 

.fadeim {
    width: 200px;
    height: 100px;
    background: url(std.png) center center no-repeat;
    -webkit-transition: background 500ms linear;
    -moz-transition: background 500ms linear;
    transition: background 500ms linear;
}

.fadeim:hover {
    background: url(std-hover.png) center center no-repeat;
}

Приведенный выше код предполагает, что ваше изображение имеет размер 200 & times; 100px; Вы должны изменить ширину и высоту в соответствии с размером изображения. Так что, если вы откроете страницу с этим CSS-кодом, вы увидите изображение, а при наведении курсора изображение должно исчезнуть в другой. В настоящее время это работает только в WebKit (Chrome и Safari) и Mozilla (Firefox), поэтому, если кто-то использует неподдерживаемый браузер, страница будет работать точно так же, но изображение сразу же изменится без выцветания.

Ad @ м

2 голосов
/ 02 сентября 2011

Вам нужно разместить два элемента друг над другом (с помощью абсолютного / относительного позиционирования CSS), тогда вы сможете уменьшить непрозрачность верхнего элемента, чтобы он выглядел так, как будто он исчезает в нижнем.

После завершения затухания быстро переключите атрибуты SRC изображений (пользователь не заметит) и подготовьтесь к следующему циклу.

Я предлагаю этот HTML-код (поскольку вы устанавливаете ширину и высоту только в одном месте идети адаптируются к размеру родителей): 

<div id='slideContainer' style='width:50px; height:50px; position: relative;'>
     <img src='hover.jpg' style='position:absolute; top:0px; right:0px; bottom:0px; left: 0px; display:none;' />
     <img src='original.jpg' style='position:absolute; top:0px; right:0px; bottom:0px; left: 0px; display:none;' />
</div>
1 голос
/ 02 сентября 2011

Когда вы наводите «первое» изображение, второе еще не загружено.

Попробуйте следующим образом: 

$('.fadeim').each(function() {

    var std = $(this).attr("src");
    var hover = std.replace(".png", "-hover.png");  

    $(this).clone().insertAfter(this).attr('src', hover).removeClass('fadeim').siblings().css({
        zIndex: '1',
        position:'absolute'
    });
    $(this).mouseenter(function() {
        $(this).stop().fadeTo(600, 0);
    }).mouseleave(function() {
        $(this).stop().fadeTo(600, 1);
    });

});

FIDDLE DEMO

1 голос
/ 02 сентября 2011

Способ решения вашей проблемы:

предварительно загрузите вторую картинку, как сказал Рок Краль, не загружайте ее в ту секунду, когда она вам понадобится.

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

Лучший способ

установить одно изображение как src, другое - как parentNodeизображение на заднем плане.только анимируйте изображение.

Поскольку пользователям не нужен пробел, им просто нужно преобразование для лучшего восприятия

...