JQuery FadeIn класс обходной путь без пользовательского интерфейса - PullRequest
Новая
       33

JQuery FadeIn класс обходной путь без пользовательского интерфейса

2 голосов
/ 30 ноября 2011

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

Я не могу использовать пользовательский интерфейс Jquery и делает парение намного сложнее, чем нужно.У меня есть спрайт, который мне нужен, чтобы исчезать и зависать..css () не позволяет исчезать, и это спрайт, который вызывается с помощью bg position

Мой план состоит в том, чтобы добавить / удалить класс при наведении мыши / выходе или наведении курсора.Эта часть проста, получить эффект ослабления нет.Это их код.Как бы я использовал что-то вроде этого, чтобы просто добавить и удалить класс, чтобы я мог затемнить его, чтобы имитировать анимированное / синхронизированное наведение? 

$(".nav").children("li").each(function() {
        var current = "nav current-" + ($(this).attr("class"));
        var parentClass = $(".nav").attr("class");
        if (parentClass != current) {
            $(this).children("a").css({backgroundImage:"none"});
        }
    }); 


    // create events for each nav item
    attachNavEvents(".nav", "home");
    attachNavEvents(".nav", "about");
    attachNavEvents(".nav", "services");
    attachNavEvents(".nav", "contact");


    function attachNavEvents(parent, myClass) {
        $(parent + " ." + myClass).mouseover(function() {
            $(this).append('<div class="nav-' + myClass + '"></div>');
            $("div.nav-" + myClass).css({display:"none"}).fadeIn(200);
        }).mouseout(function() {
            // fade out & destroy pseudo-link
            $("div.nav-" + myClass).fadeOut(200, function() {
                $(this).remove();
            });
        });
    }

Используемый мной CSS-код будет просто выглядеть примерно так:* 

.btn_up {
width: 161px;
height: 40px;
background-position: -131px -310px;
margin:10px auto;
}

.btn_uphover{
background-position: -292px -310px !important;
-moz-opacity:0; 
filter:alpha(opacity=0); 
opacity:0;
}

1 Ответ

0 голосов
/ 30 ноября 2011

Хотя я не могу предоставить точный необходимый код.
Я думаю, что вы ищете функцию jQuery .animate.
Больше информации здесь:

http://api.jquery.com/animate/

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

...