SlideDown mag nicht wie ich es will

dreadkopp

Gesperrt
Aloha Community,

ich habe ein js erstellt, welches dafür sorgen soll, dass auf einer Seite ein Bildschirmfüllendes Banner angezeigt wird. Dazu soll vorerst auch der Header versteckt werden. Wird aus dem Banner herausgescrollt oder der Continue-Button angeklickt, so soll der Header erscheinen.

das Skript dazu schaut so aus:

Code:
jQuery('.site-header').hide();
jQuery('.loadinggif').hide();
var clicked = 0;
jQuery(document).ready(function($) {
  $('.site-header').after('<img id="banner" style="width:100%; margin-top:-240px; position:relative" src="https://i.imgflip.com/kpvez.jpg"></img>');
  $('.site-header').after('<button id="continuebutton" style="z-index:10; position:absolute; margin-left:48%; margin-top:30%">Continue</button>');
  $("#continuebutton").click(function() {
  $('.site-header').style = "margin-top: -10px";
  $('.site-header').slideDown(500);
  $('.entry-content').animatescroll({scrollSpeed: 1500,padding: 0,});
  clicked = 1;
  });
});
window.onscroll = function($) {
  jQuery('.site-header').slideDown(500);
  var height = jQuery('#banner').height() + 19;
  if (clicked == 1) {
  if (jQuery(window).scrollTop() < height) {
  jQuery('.entry-content').animatescroll({scrollSpeed: 0,padding: 240,});
  }
  }
  if (jQuery(window).scrollTop() > height) {
  clicked = 1;
  }
}

anzuschauen auf der Seite http://yoshi.dynu.com/flexosite

Mein Problem ist, dass der anfänglich versteckte Header nicht auf .slideDown() reagiert. auch ein .show() funktioniert nicht.

Alle anderen Funktionen funktionieren wie gewünscht (scrollstop nach oben, button).

Kann mir hier jemand auf die Sprünge helfen, was ich falsch mache?

Grüße
 
Zuletzt bearbeitet:
Ich bin erstaunt darüber, dass bei Dir überhaupt irgendwas funktioniert, wo Du doch $ als Argument des Callbacks verwendest und somit mit einem Event-Objekt überschreibst. Wenn es gehen sollte, dann lass da einfach die Argumentangabe weg!
Javascript:
(function($) {
  $( '.site-header, .loadinggif' ).hide();
  var clicked = false;

  $(function() {
    $( '.site-header' ).after(
      '<img id="banner" style="width:100%; margin-top:-240px; position:relative" src="https://i.imgflip.com/kpvez.jpg"></img>',
      '<button id="continuebutton" style="z-index:10; position:absolute; margin-left:48%; margin-top:30%">Continue</button>'
    );

    $( '#continuebutton' ).on( 'click', function() {
      $( '.site-header' )
        .css( 'margin-top', '-10px' )
        .slideDown( 500 );

        $( '.entry-content' ).animatescroll({ 'scrollSpeed': 1500, 'padding': 0 });
        clicked = true;
    });
  });

  $(window).on( 'scroll', function() {
    $( '.site-header' ).slideDown( 500 );
    var height = $( '#banner' ).height() + 19;

    if ( clicked && $(window).scrollTop() < height ) {
      $( '.entry-content' ).animatescroll({ 'scrollSpeed': 0, 'padding': 240 });
    }

    if ( $(window).scrollTop() > height ) {
      clicked = true;
    }
  });
})(jQuery);
 
Danke, dass du dich meiner annimmst ;) Mit Java habe ich erfahrung, js ist 'neuland' für mich.

habe jetzt das ganze nochmal etwas abgeändert:

Code:
(function($) {
  $( '.site-header, .loadinggif' ).hide();
  var clicked = false;
  $(function() {
  $( '.site-header' ).after(
  '<img id="banner" style="width:100%; margin-top:-240px; position:relative" src="https://i.imgflip.com/kpvez.jpg"></img>',
  '<button id="continuebutton" style="z-index:10; position:absolute; margin-left:48%; margin-top:-50%">Continue</button>'
  );
  $( '#continuebutton' ).on( 'click', function() {
     $( '.site-header' ).slideDown( 1000 );
     $( '.entry-content' ).animatescroll({ 'scrollSpeed': 1500, 'padding': -5 });
  });
  });
  $(window).on( 'scroll', function() {
  $( '.site-header' ).slideDown( 1000 );
  var height = $( '#banner' ).height() - 40;
   if ( clicked && $(window).scrollTop() < height ) {
  $( '.entry-content' ).animatescroll({ 'scrollSpeed': 0, 'padding': 0 });
  }
   if ( $(window).scrollTop() > height ) {
     clicked = true;
  }
  });
})(jQuery);

leider bockt der header immer noch rum und will sich nicht zeigen, woran könnte es hängen?
 

Neue Beiträge

Zurück