Нужна помощь с простым переходом JQuery Fadein / Out - PullRequest
Новая
       9

Нужна помощь с простым переходом JQuery Fadein / Out

2 голосов
/ 14 июня 2011

Используя jquery, я пытаюсь заставить фоновое изображение плавно переходить в другое при наведении на него курсора и затемнять при отключении мыши.Я пробовал бесчисленное количество решений за последние несколько часов, и не могу найти подходящее решение.Ниже мой css 

.thumbnail span {
    background: url('images/portfolio.png') no-repeat;
    width: 298px;
    height: 160px;
    position: absolute;
    top: 0;
    left: 0;
    margin-left:-2px;
    cursor: pointer;
}

.thumbnail span .rollover {
    background: url('images/portfolio_vignette.png') no-repeat;

}

, а вот мой JavaScript: 

<script type="text/javascript">         
$(document).ready(function(){

    $(".rollover").css({'opacity':'0'});

    $('.thumbnail span').hover(
        function() {
            $(this).find('.rollover').stop().fadeTo(500, 1);
        },
        function() {
            $(this).find('.rollover').stop().fadeTo(500, 0);
        }
    )

});     
</script>

Ура, ребята!

Ответы [ 4 ]

0 голосов
/ 14 июня 2011

Упрощение кода Джеффа Б. ..

Использование jadeler's fadeToggle, чтобы избежать отдельных функций для затухания и входа.

http://jsfiddle.net/danielredwood/wQkWR/2/

0 голосов
/ 14 июня 2011

Вы можете получить доступ к классу миниатюр для выполнения постепенного увеличения или уменьшения.

$ (. Thumbnail) .fadeIn ('slow');

или

$ (.thumbnail) .fadeIn (700);// милисекунды

для постепенного исчезновения выполните обратное

$ (. thumbnail) .fadeOut ('fast');

или

$ (. thumbnail) .fadeOut (300);// милисекунды

0 голосов
/ 14 июня 2011

Обязательно поместите оболочку div вокруг двух изображений и прикрепите к ней событие наведения.Если вы этого не сделаете, ваше наведение будет непрерывно срабатывать, когда изображение исчезает / появляется.

Здесь я просто затушевываю последний элемент при зависании и при отключении.Конечно, вы можете быть более конкретным и действовать только на img тегах или на определенных идентификаторах.Общий способ более полезен, так как вам больше никогда не придется писать код для другой пары изображений.

HTML: 

<div class="hoverfade">
    <img src="http://my/image1.jpg">
    <img src="http://my/image2.jpg">
</div>

jQuery: 

$(".hoverfade").hover(function() {
    $(this).children().last().fadeOut(1000);
}, function() {
    $(this).children().last().fadeIn(500);
})

Пример: http://jsfiddle.net/jtbowden/wQkWR/

Пример использования div с фоновыми изображениями: http://jsfiddle.net/jtbowden/wQkWR/1/

0 голосов
/ 14 июня 2011

Поместите 2 изображения точно в одну и ту же позицию, затем с помощью javascript сделайте верхнее изображение плавнее.Это даст желаемый эффект

...