Как я могу использовать jQuery, чтобы добавить эффект плавного наведения на элементы навигации? - PullRequest
Новая
       24

Как я могу использовать jQuery, чтобы добавить эффект плавного наведения на элементы навигации?

1 голос
/ 25 августа 2010

Я новичок в jQuery (и JS в целом), и я знаю, что его можно использовать для добавления эффекта затухания к моим опрокидываниям навигации.

Сейчас я использую основной фоновый спрайт для навигации и включаю: hover. Я просто добавляю правило положения фона, чтобы сдвигать спрайт вниз для каждого элемента, чтобы получить эффект наведения.

Но я бы хотел использовать jQuery для плавного перехода к эффекту опрокидывания. Я гуглил его и нашел некоторую похожую информацию, но в основном то, что я нашел, касалось случаев, когда у вас есть два изображения и выцветание одного, чтобы показать другое. Но я использую CSS background-position, чтобы просто сместить изображение вниз. Могу ли я сделать это более гладко с помощью jQuery и как?

Вот сайт: http://tuscaroratackle.com

1 Ответ

2 голосов
/ 25 августа 2010

1 пример из 100-го

Добавьте тег

в элемент и примените его из класса стилей фона CSS для "span.bg1" и "a: hover span.bg2 (когда это: hover) " 
 <li class="nav-link " id="rods">
      <a href="/rods">
      <span class="bg1">Rods</span>
      <span class="bg2" style="display:none;">Rods</span>
      </a>

  </li>

jquery 

    $(document).ready(function(){
    $("ul#nav li").each(function(){
        $(this).mouseover(function(){


                $(this).find("a span.bg1").fadeOut() ;
                $(this).find("a span.bg2").fadein() ;


        });

    });

});



 $(document).ready(function(){
    $("ul#nav li").each(function(){
        $(this).mouseover(function(){


                $(this).find("a").addClass("bg1").fadeOut() ;
                $(this).find("a").fadeIn();


        });

    });

});

и то же самое, когда мышь пытается изменить задний фон, это не готовый код, даже непроверено, но это для вас идея

вместо исчезновения вы можете использовать любой эффект!

PS: Но я думаю, что просто: эффект наведения более удобен для пользователя и выглядит неплохо:)

...