Ausblenden/einblenden von DIVs - ändern Sie das aktuelle Wirkung zu verblassen

Ich bin derzeit mit dem nachstehenden code gefunden, die auf web-tutorial zum einblenden/ausblenden der DIVs. Es funktioniert großartig, aber nicht, wie die Wirkung. Möchte die DIVs um die fade-in /fade-out statt (oder etwas weichere, für den moment die DIVs sind immer von der oberen rechten Ecke). Wie könnte ich das anpassen, der code, dies zu tun? Youc ans ee es hier http://jsfiddle.net/Grek/w4HWn/1/ Vielen Dank

function showonlyone(thechosenone) {
     $('.textzone').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).show(2000);
          }
          else {
               $(this).hide(2000);
          }
     });
}
  • Ändern .show() .hide() zu .fadeIn() .fadeOut()
  • Verwenden Sie eine each-Schleife nur für die Suche nach einem element mit einer bestimmten id?
  • versuchen Sie kennen zu lernen, die Dokumentation und die schöne Suchfunktion auf der Website api.jquery.com/fadeOut
  • Danke, habe ich versucht, aber das ist zu technisch für mich in diesem Stadium, aber auf jeden Fall versuchen zu verbessern, meine js Fähigkeiten
InformationsquelleAutor Greg | 2012-08-12
  1. 4

    Nur ändern .hide() zu .fadeOut() und .show() zu .fadeIn()

    Aber mit Blick auf dein Beispiel könnte man es machen, viel einfacher durch die Verwendung von data-Attributen.

    Haben Sie einen Blick auf diese Beispiel.

    Müssen Sie möglicherweise die absolute Positionierung oder eine andere Technik, da die beiden divs stapeln sich, während das ein-und ausblenden.

    • Dank Moin, leider klappt das nicht
    • Siehe meine aktualisierte Antwort.
    • Danke Moin. Leider, das funktioniert nicht, wahrscheinlich aus dem gleichen Grund, warum Raminson code funktioniert auch nicht (meine Website ist eine einzelne Seite und jede Seite hat einen separaten div - siehe die Webseite hier goo.gl/kPPYB )
    • Ein weiteres aktualisiertes Beispiel. Die # war, dass die Seite Sprung an die Spitze.
    • Moin Moin, aus irgendeinem Grund dein code funktioniert in jsfiddle aber nicht auf meiner website. Die Seite mit den aktualisierten code: goo.gl/kPPYB
    • funktioniert nicht für mich.

    InformationsquelleAutor Moin Zaman
  2. 1

    Können Sie fadeIn und fadeOut Methoden, Sie können auch verkleinern Sie den code, versuchen Sie Folgendes:

    function showonlyone(thechosenone) {
     $('.textzone').fadeOut();
     $('#'+thechosenone).fadeIn();
}

    Wie Sie mit Hilfe von jQuery können Sie die jQuery - click handler:

    HTML:

    <div class="source-title-box"><span class="activity-title"><a href="#source-region">Our region</a></span></div>
<div class="source-title-box"><span class="activity-title"><a href="#source-oursource">Our source</a></span></div>

    jQuery:

    $('.activity-title a').click(function(e){
    e.preventDefault()
     var thechosenone = $(this).attr('href');
    $('.textzone').fadeOut(600, function(){
         $(thechosenone).fadeIn(600);
    });   
})

    DEMO

    • Dank Ramison. Ich habe versucht dreamweaver sagt mir, dass der code nicht gültig ist und es nicht funktioniert (wenn es hilft das der original code ist hier jsfiddle.net/Grek/w4HWn/1 )
    • Sie sind herzlich eingeladen, probieren Sie die aktualisierte Antwort.
    • Hi Raminson, vielen Dank für die ausführliche Antwort. Leider nicht funktioniert, wahrscheinlich, weil ich bin schon mit DIVs, um zwischen den Seiten zu navigieren (siehe code in Aktion hier goo.gl/kPPYB Seite "die Quelle")
    InformationsquelleAutor undefined
Schreibe einen Kommentar