Непрозрачность Animate Child с помощью JQuery - PullRequest
Новая
       6

Непрозрачность Animate Child с помощью JQuery

0 голосов
/ 12 декабря 2011

У меня есть выпадающий список, в котором я хотел бы, чтобы прозрачность исчезла при наведении родителя.Я использую display: none, поэтому я не уверен, влияет ли это на вещи ... Я знаю, что это влияет на переходы CSS3. 

  <ul class="headermenu">
                <li><a href="index.php">Index</a></li>
                <li class="topmenu"><a href="#">Parent</a>
                    <div class="submenu">
                        <ul class="sub">
                            <li><a href="#">Drop down 1</a></li>
                            <li><a href="#">Drop down 2</a></li>
                            <li><a href="#">Drop down 3</a></li>
                            <li><a href="#">Drop down 4</a></li>
                        </ul>
                    </div>                  
                </li>
                <li><a href="#">Irrelevant</a></li>
                <li><a href="#">Irrelevant</a></li>
            </ul>

Мой CSS для parent / child: 

.submenu { 
    display:none;
    visibility:hidden;
    opacity:0.0;
}


.topmenu:hover .submenu {
    display:block;
    position:absolute;
    float:left;
    top:25px;
    left:-20px;
    margin:0px;
    padding:10px 10px;
    width:360px;
    height:35px;
    background:none;
    visibility:visible;
    opacity:1.0;

 }

Мой бедный, плохой неудачник JQUERY: 

$(document).ready(function() {
    $('.topmenu').each(function() {
        $('.topmenu').hover(function() {
            $('.submenu').stop().animate({ opacity:1.0 }, 700);
        },
       function() {
           $('.submenu').stop().animate({ opacity:0.0 }, 600);
       });
    });
});

Как ни странно, он оживляет непрозрачность во второй раз, когда я парю, но не при зависании, и я уверен, что есть лучший способ достичьэто, я просто не уверен, что.Возможно, некоторые из моих правил CSS перезаписывают мой JQuery ....

Большое спасибо ТАК.

1 Ответ

0 голосов
/ 12 декабря 2011

Да, вы можете упростить это:

JQuery: 

$(function(){
    $('.topmenu').hover(function(){
        $(this).children('.submenu').stop().fadeIn(700);
    },function(){
        $(this).children('.submenu').stop().fadeOut(600);
    });
});

CSS: 

.topmenu {
    position:relative;
}

.submenu {
    display:none;
    position:absolute;
    top:10px;
    left:20px;
    margin:0;
    padding:10px;
    width:360px;
    background-color:#F0F0F0;
 }

Демо: http://jsfiddle.net/shTyp/

...