jquery

ile içerik açılış yukarı kaydırın nasıl

Benim tasarımcı bana jquery ve css ile nasıl% 100 emin değilim bir tasarım uzattı. Ben ikonların daha yukarı conent ortaya çıkarmak için "slayt" altbilgi bir kullanıcı izin çalışıyorum.jquery

Benim html ..

<div id="footer"> 
    <div id="expandingFooter"> hidden content</div> 
     content that is always visible 
</div>

O zamanlar kapatmak için yukarı kayar, bu açık aşağı doğru genişleyen altbilgi içeriğini slaytlar

$('#expandingFooter').slideToggle();

onclick bir geçiş düğmesi vardır. Kaymasını ve sonra kapanmasını istiyorum.

sayesinde böyle

kaynak

2008-12-12 studiothat

Sen JQuery UI 1.6 en Efektler (Effects Demo Page) yararlanabilir. Aşağıdaki benim için istenen etkiyi başardı.

$('#toggleButton').bind('click', function(e) { 
    $('#expandingFooter').toggle(
     'slide', 
     { easing: 'easeOutQuint', direction: 'down' }, 
     1000 
    ); 
});

Not: Efektin istenen düzgünlüğünü elde etmek için hareket hızı parametresiyle oynamak isteyebilirsiniz.

Bunu yapmak için hem JQuery ve JQuery UI Slide Effect son sürümlerini olması gerekir.

kaynak

2008-12-12 19:07:52 Manik

deneyin şey:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
    <title>Untitled</title> 
    <script type="text/javascript" src="shared-scripts/jquery-1.2.4b.js"></script> 
    <script type="text/javascript"> 
    <!-- 
    $(document).ready(function(){ 
    $("#footer").click(function() { 
     if ($("#expandingFooter").is(":hidden")) { 
     $("#expandingFooter").show("slow"); 
     } else { 
     $("#expandingFooter").slideUp(); 
     } 
    }); 
    $("#expandingFooter").hide(); 
    }); 
    //--></script> 

</head> 

<body> 
<div id="footer"> 
    <div id="expandingFooter"> hidden content</div> 
     content that is always visible 
</div> 
</body> 
</html>

kaynak

2008-12-12 18:45:21 cLFlaVA

Benim çözümüm bir numara bir parçasıdır. Bunu elde edebilirsiniz yolu html/css tasarımı bağlıdır çünkü slideUp() Eğer JQuery inşa edilmez istediğiniz şekilde çalışır. Normal akış yukarıdan aşağıya doğrudur.

<a id="toggle">Toggle()</a> 

<div id="slide" style="position:relative; height: 100px"> 

    <div id="slideInner" style="position:absolute; bottom: 0; background: lightblue""> 
     <p>Suspendisse potenti. Vivamus libero. Dummy Text</p> 
    </div> 

</div> 


<script type="text/javascript"> 
    $('.hoverable').hover(function() { $(this).find("div").show(); }, 
         function() { $(this).find("div").hide(); }); 

    $('#toggle').click(function() { 
     $('#slideInner').slideToggle(); 
    }); 
</script>

Bu kod sadece bir örnek:

Bunu önermek. Satır içi css'yi harici bir sayfaya taşıyın. Javascript için idem. Eğer 'slayt' div, disapeare slideToggle() için bir geri arama eklemek istiyorsanız

'slayt' div üzerinde bir çağrı hide() işlev.

kaynak

2008-12-12 18:51:53

cevap

İlgili konular