jquery mouseover с исчезновением и текстом

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

У меня есть следующий код с двумя изображениями... 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 изображения (быстро / медленно / или нет)

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

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

Ваше здоровье


javascript jquery formatting hover onmouseover
person pckeys    schedule 17.03.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Попробуй это:

Предположим, у вас есть такая структура 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.hover в качестве запасного варианта для ie

person Nemoy    schedule 17.03.2012
comment
Большое спасибо за ваш ответ. Используя ваш пример, как бы я включил добавление отображаемого текста при наведении курсора мыши с исчезновением/исчезновением при наведении курсора (быстро/медленно/или нет) после исчезновения изображения, форматирования текста (шрифт/выравнивание/верхний нижний центр/фон/непрозрачность) - person pckeys; 18.03.2012
comment
Вы можете использовать ту же логику. Структурируйте свой html соответствующим образом и используйте его внутри функции .hover - person Nemoy; 18.03.2012