Переключенные и анимированные ссылки привязки больше не перемещаются - PullRequest
Новая
       19

Переключенные и анимированные ссылки привязки больше не перемещаются

3 голосов
/ 12 сентября 2011

Я использую jQuery.toggle и .animate для меню навигации, которое находится внизу страницы. Навигация состоит из двух div, один как внешний контейнер, а другой как внутренний контейнер, который содержит кнопки навигации и т. Д.

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

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

Вот ссылка

JQuery: 

$('#navContainer').toggle(function() {
    $('#navInner').animate({
        bottom: '+=350'
    }, 400, 'swing', function() {
    });
}, function() {
    $('#navInner').animate({
        bottom: '-=350'
    }, 400, 'swing', function() {
    });
});

CSS: 

#navContainer {
    background-color:#0FF;
    height:520px;
    margin:0px 0px 0px 60px;
    position:fixed;
    cursor:pointer;
    bottom: 0px;
}

#navInner {
    background:url(../images/appinstructions/nav2.png);
    background-repeat:no-repeat;
    width:638px;
    height:491px;
    position:absolute;
    bottom:-350px;
}

HTML: 

<div id="navContainer">
    <div id="navInner">
        <a id="navhomeBtn" href="appInstuc.html"></a>  
        <a id="navhelpBtn" href="appInstuc.html"></a>
        <a id="geBtn" href="http://www.ge.com/" target="_blank"></a>
        <div id="pages">
            <a href="ipadApp1.html"><img src="images/appinstructions/page1.png" alt="page 1"   class="page"/></a>
            <a href="app1-1.html"><img src="images/appinstructions/page2.png" alt="page 2" class="page"/></a>
            <a href="appRoots.html"><img src="images/appinstructions/page3.png"  alt="page3"class="page"/></a>
        </div><!--close pages--> 
    </div><!--close navInner--> 
</div><!--close navContainer-->

1 Ответ

3 голосов
/ 13 сентября 2011

Проблема, похоже, связана с функцией .toggle, если вы используете .click, ссылки работают.Причина, по которой ссылки не работают с использованием .toggle, заключается в том, что ссылки являются дочерними по отношению к #navInner div, поэтому при нажатии на ссылку запускается событие .toggle.

Я бы предложил вместо этого сделать что-то подобное:

var showing = false;
$('#navInner').click(function(e){

    if(e.target != this) return;

    // Work out which direction we're moving in
    var topValue = "";
    if(showing){
        topValue = "+=350";
    } else {
        topValue = "-=350";
    }   

    // Change the showing variable to opposite
    showing = !(showing);

    // Begin the animation
    $(this).animate({ 
        top: topValue
    }, 400, 'swing', function(){
        // Do nothing
    });

});

Это даст вам эффект метода переключения, но если вы щелкнете по одному из дочерних элементов, он не будет анимировать #navInner div.

Если вы хотите, чтобы онпо-прежнему анимируйте #navInner div, просто удалите следующую строку: 

if(e.target != this) return;

(хотя, поскольку они являются ссылками и переносят вас на другую страницу, я сомневаюсь, что анимация #navInner div необходима)

...