JQuery мыши с исчезновением и текстом - PullRequest
Новая
       20

JQuery мыши с исчезновением и текстом

0 голосов
/ 17 марта 2012

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

У меня есть следующий код с 2 изображениями ... blue.png - это цветизображение bluebw.png это то же изображение в черно-белом.Код просто меняет изображения при наведении мыши. 

<script  type='text/javascript'>
$(document).ready(function(){
    $(".blue").hover(function() {
        $(this).attr("src","files/blue.png");
            }, function() {
        $(this).attr("src","files/bluebw.png");
    });
});
</script>

<a href="page-1.html">
<img src="files/bluebw.png" alt="dresses" class="blue" height="300" width="170" />

Я хотел бы сделать следующее:

  • добавить опцию для постепенного появления / наведения при наведении мыши2 изображения (быстрое / медленное / или ни одного)

  • добавить отображаемый текст при наведении курсора мыши с постепенным увеличением / уменьшением при наведении курсора (быстрый / медленный / или ничего) после исчезновения изображениятекст (шрифт / выравнивание / верхний нижний центр / фон / непрозрачность)

Я действительно летаю в темноте :) Любая помощь будет очень цениться.

Приветствия

1 Ответ

1 голос
/ 17 марта 2012

Попробуйте:

Предположим, у вас есть такая структура HTML: 

<div id="element" style="position:relative;">
   <img src="image1.gif" id="img1" />
   <img src="image2.gif" id="img2" style="display:none" />
</div>

и css: 

img {
  position:absolute;
  top:0;
  left:0;
}

jQuery код: 

$("#element").hover(function() {
    //fadeout first image using jQuery fadeOut
    $("#img1").fadeOut(200);
    //fadein second image using jQuery fadeIn 
    $("#img2").fadeIn(200);
}, function () {
    //fadeout second image using jQuery fadeOut
    $("#img1").fadeIn(200);
    //fadein first image using jQuery fadeIn
    $("#img2").fadeOut(200);
});

Вот скрипка для демонстрации

Или вы можете использовать переход css3:

Вот скрипка с использованием css3 и jQuery.парить как запасной вариант для т.е.

...