jQuery ile İlgili Sorunlar Tıklamada Animasyon - Twice needed + Wrong effect

Bu yüzden, bir düğmeyi/yayılmayı tıkladığınızda gezinme çubuğu yapmaya çalışıyorum, üst kısımdan gezinme çubuğunun hemen altına bir div görünür. . Ama, 'Homer' ı tıklattığımda, İlk hiçbir şey olmuyor, ancak ikinci kez tıklıyorum, o zaman herhangi bir yerde kullanmadığım BİR DAHA İYİ ETKİLE geliyor. [. Ben efektin adını bilmiyorum, ama div bunun kendi sol üst köşesinden görünen] Bu Benim istediğimjQuery ile İlgili Sorunlar Tıklamada Animasyon - Twice needed + Wrong effect

o ne olacak:

Gezinme üzerinde 'Homer' tıkladığınızda Bar, vücuttan vücuttan bir div geliyor. Gezinme çubuğunun altındaki div, 0px'e hareket etmeli, böylece gezinme çubuğunun tabanı ile div (gizli-homer) arasında en üstte yer yok. Homer'a tekrar tıkladığımda, div (gizli homer) tekrar ekrandan çıkmak zorundadır, bu yüzden yukarı. "Kullanımdan kaldırıldı getPreventDefault() ait Kullanımı Kullanım defaultPrevented yerine.." : JSFiddle yılında

, bu Firefox Konsolu ... Hiç, 1 uyarı

yok hataları çalışmıyor JSHint (JSFiddle) içinde
hiçbir hata Yani

2 sorunlar:

'Homer' üzerine tıkladığımda hiçbir şey olmuyor.
'Homer' - sayfayı yeniden yüklemeden - ikinci kez tıklattığımda, div yanlış bir konumda yanlış bir şekilde (gezinti çubuğunun altında görünür) görünür.

HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="main.css"> 
    <script src="jquery.js"></script> 
    <title></title> 
    <meta charset="UTF-8"> 
</head> 

<body> 

    <div id="nav"> 
     <span>Homer</span> 
     <span>Marge</span> 
     <span>Bart</span> 
     <span>Lisa</span>  
     <span>Maggie</span> 
    </div> 

    <div id="hidden-homer" class="hidden"> 
     <h1>Homer</h1> 
     <p>Text</p> 
    </div> 

     <div id="hidden-marge" class="hidden"> 
     <h1>Marge</h1> 
     <p>Text</p> 
    </div> 

    <div id="hidden-bart" class="hidden"> 
     <h1>Bart</h1> 
     <p>Text</p> 
    </div> 

     <div id="hidden-lisa" class="hidden"> 
     <h1>Lisa</h1> 
     <p>Text</p> 
    </div> 

    <div id="hidden-maggie" class="hidden"> 
     <h1>Maggie</h1> 
     <p>Text</p> 
    </div> 

    <div id="intro"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/The_Simpsons_Logo.svg/300px-The_Simpsons_Logo.svg.png"> 
    </div>

jQuery:

<script> 
    var main = function() { 
     $('#nav span:nth-child(1)').click(function() { 
      $('#hidden-homer').toggle(function() { 
       $(this).animate({top: '70px'}, 100); 
       }, function() { 
        $(this).animate({top: '-70px'}, 100); 
       }); 
     }); 
    }; 
    $(document).ready(main); 
    </script>

CSS:

body { 
    background-color: #0040FF; 
    padding: 0px; 
    margin: 0px; 
} 

a { 
    outline: none; 
} 

#nav { 
    height: 70px; 
    line-height: 70px; 
    background-color: #FFBF00; 
    font-size: 0px; 
    text-decoration: none; 
    width: 100%; 
    text-align: center; 
    font-family: sans-serif; 
    margin-bottom: none; 
    z-index: 1; 
} 

#nav span { 
    display: inline-block; 
    font-size: 35px; 
    padding-left: 10px; 
    padding-right: 10px; 
    text-align: center; 
    border-right: 3px solid #0040FF; 
    height: 70px; 
    cursor: pointer; 
    color: #0040FF; 
    text-decoration: none; 
    font-weight: bold; 
} 

#nav span:first-child { 
    border-left: 3px solid #0040FF; 
} 

#nav span:hover { 
    background-color: #0040FF; 
    color: #FFBF00; 
} 

.hidden { 
    width: 100%; 
    height: 200px; 
    padding-left: 30px; 
    background-color: #1C1C1C; 
    color: red; 
    font-size: 10px; 
    top: -250px; 
    position: absolute; 
    z-index: -1; 
    border: 2px solid black; 
} 

img { 
    height: 200px; 
    width: 400px; 
    transform: rotate(10deg); 
}

kaynak

2015-05-01 HydraCles

Hangi jQuery sürümünü kullanıyorsunuz? .toggle() 'nın iki işlevli formu 1.9'da kaldırıldı. – Barmar

@Barmar Sıkıştırılmamış: http://code.jquery.com/jquery-1.11.2.js – HydraCles

O halde '.toggle 'özelliğini kullanamazsınız. Http://stackoverflow.com/questions/2459153/alternative-to-jquerys-toggle-method-that-supports-eventdata – Barmar

DIV öğesinin, nav çubuğundaki öğeye her tıkladığınızda hangi yöne hareket etmesi gerektiğini izlemek için bir değişken kullanın.

var up = true; 
$("#nav span:nth-child(1)").click(function() { 
    $("#hidden-homer").animate({ 
     top: up ? "-70px" : "70px" 
    }, 100); 
    up = !up; 
});

kaynak

2015-05-01 06:34:17 Barmar

Merhaba, teşekkürler! Artık iki kez tıklamaya gerek yok ... ama işe yaramıyor. 'Aşağı' hakkında bir hata alıyorum ve ne olduğunu anlamıyorum (yukarı: yukarı? "-70px": "70px"), hızlı bir açıklama yardımcı olacaktır. – HydraCles

Üzgünüz, değişkenin adını "aşağı" dan "yukarı" olarak değiştirdim, ancak bazı yerleri kaçırdım. – Barmar

Awww .... Çok teşekkür ederim, ama yine de ... div başlamak zorunda olduğu yerden başlar (ekrandan). Ama 'Homer'ı tıkladığımda, ilk önce bazı pikselleri aşağıya taşıyorum [bunu şimdi [1] olarak adlandırıyorum), sonra tekrar tıklıyorum, daha aşağıya doğru [2], sonra tekrar tıklıyoruz [1]' e geri dönüyor ama ekrandan geri dönmez ... – HydraCles

jQuery ile İlgili Sorunlar Tıklamada Animasyon - Twice needed + Wrong effect

cevap

İlgili konular